jQuery實現(xiàn)表單驗證
更新時間：2021年06月17日 17:08:26 作者：二木成林
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)表單驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用jQuery實現(xiàn)表單驗證，供大家參考，具體內(nèi)容如下
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊</title>
<!--導(dǎo)入jQuery-->
<script src="js/jquery-3.3.1.js"></script>
<!--進(jìn)行表單校驗-->
<script>
/*
表單校驗：
1.用戶名：單詞字符，長度8到20位
2.密碼：單詞字符，長度8到20位
3.email：郵件格式
4.姓名：非空
5.手機(jī)號：手機(jī)號格式
6.出生日期：非空
*/
// 校驗用戶名
// 單詞字符，長度8到20位
function checkUsername() {
// 1.獲取用戶名值
var username = $("#username").val();
// 2.定義校驗正則
var reg_username = /^\w{8,20}$/;
// 3.判斷是否滿足校驗要求，并給出提示信息
var flag = reg_username.test(username);
if (flag) {
// 用戶名合法
$("#username").css("border", "");
} else {
// 用戶名非法，加一個紅色邊框
$("#username").css("border", "1px solid red");
}
// 4.返回是否通過校驗
return flag;
}
// 校驗密碼
function checkPassword() {
//1.獲取密碼值
var password = $("#password").val();
//2.定義正則
var reg_password = /^\w{8,20}$/;
//3.判斷，給出提示信息
var flag = reg_password.test(password);
if (flag) {
//密碼合法
$("#password").css("border", "");
} else {
//密碼非法,加一個紅色邊框
$("#password").css("border", "1px solid red");
}
// 4.返回校驗是否通過
return flag;
}
// 校驗郵箱
function checkEmail() {
//1.獲取郵箱
var email = $("#email").val();
//2.定義正則 itcast@163.com
var reg_email = /^\w+@\w+\.\w+$/;
//3.判斷
var flag = reg_email.test(email);
if (flag) {
$("#email").css("border", "");
} else {
$("#email").css("border", "1px solid red");
}
// 4.返回校驗是否通過
return flag;
}
// 校驗姓名
function checkName() {
// 1.獲取姓名
var name = $("#name").val();
// 2.判斷非空并返回校驗是否通過
if (typeof name == "undefined" || name == null || name == "") {
$("#name").css("border", "1px solid red");
return false;
} else {
$("#name").css("border", "");
return true;
}
}
// 校驗手機(jī)號
function checkTelephone() {
// 1.獲取手機(jī)號
var telephone = $("#telephone").val();
// 2.定義正則
var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;
// 3.判斷
var flag = reg_tel.test(telephone);
if (flag) {
$("#telephone").css("border", "");
} else {
$("#telephone").css("border", "1px solid red");
}
// 4.返回校驗是否通過
return flag;
}
// 校驗出生日期
function checkBirthday() {
// 1.獲取出生日期
var birthday = $("#birthday").val();
// 2.判斷非空并返回校驗是否通過
if (typeof birthday == "undefined" || birthday == null || birthday == "") {
$("#name").css("border", "1px solid red");
return false;
} else {
$("#name").css("border", "");
return true;
}
}
// 進(jìn)行校驗
$(function () {
//當(dāng)表單提交時，調(diào)用所有的校驗方法
$("#registerForm").submit(function () {
// 如果這個方法沒有返回值，或者返回為true，則表單提交，如果返回為false，則表單不提交
// 1.發(fā)送數(shù)據(jù)到服務(wù)器
if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) {
// 校驗通過,發(fā)送ajax請求，提交表單的數(shù)據(jù) username=zhangsan&password=123
$.post("registerServlet", $(this).serialize(), function (data) {
if (data.flag) {
// 注冊成功，跳轉(zhuǎn)到成功頁面
alert("注冊成功！");
} else {
//注冊失敗,給errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.不讓頁面跳轉(zhuǎn)
return false;
});
//當(dāng)某一個組件失去焦點是，調(diào)用對應(yīng)的校驗方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
})
</script>
</head>
<body>
<div>
<p>用戶注冊</p>
<!--注冊表單-->
<div id="errorMsg" style="color:red;text-align: center"></div>
<form id="registerForm" action="registerServlet" method="post">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用戶名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="請輸入賬號">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密碼</label>
</td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="請輸入密碼">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="請輸入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="請輸入真實姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手機(jī)號</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="請輸入您的手機(jī)號">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性別</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="submit" class="submit" value="注冊">
<span id="msg" style="color: red;"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
<script>
</script>
</html>
后臺處理代碼也可以不看，只是前后端進(jìn)行交互需要，RegisterServlet.java
package com.demo.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Map<String, String[]> parameterMap = req.getParameterMap();
Set<String> keySet = parameterMap.keySet();
Iterator<String> iterator = keySet.iterator();
while (iterator.hasNext()) {
String key = iterator.next();
System.out.println(key + ":" + parameterMap.get(key)[0]);
}
// String str="{flag:true,errorMsg:'注冊失敗'}";// 錯誤范例
String str="{\"flag\":\"true\",\"errorMsg\":\"注冊失敗\"}";
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().print(str);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
效果：
本節(jié)代碼地址：Demo
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實現(xiàn)的回旋滾動效果完整實例【附demo源碼下載】
這篇文章主要介紹了jquery實現(xiàn)的回旋滾動效果,可實現(xiàn)點擊后側(cè)圖片呈現(xiàn)立體翻轉(zhuǎn)切換的功能,涉及jQuery插件roundabout.js的使用,并附帶了完整實例demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解
這篇文章主要介紹了jQuery.Callbacks()回調(diào)函數(shù)隊列用法,結(jié)合實例形式詳細(xì)分析了jQuery.Callbacks()回調(diào)函數(shù)隊列的功能、控制標(biāo)志含義與相關(guān)注意事項,需要的朋友可以參考下2016-06-06
關(guān)于jquery中attr()和prop()方法的區(qū)別
今兒是腳本之家小編給大家總結(jié)的jquery中attr()和prop()方法的區(qū)別，感興趣的朋友參考下2018-05-05
jquery清空input標(biāo)簽的值及清除標(biāo)簽里面的內(nèi)容
這篇文章主要介紹了jquery清空input標(biāo)簽的值,清除標(biāo)簽里面的內(nèi)容,清除input標(biāo)簽的值,可以通過直接將input標(biāo)簽的值設(shè)置為空來實現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
基于jquery的無刷新分頁技術(shù)，需要的朋友可以參考下。2011-06-06
這篇文章主要介紹了jQuery簡單實現(xiàn)禁用右鍵菜單的方法，非常的簡單實用，這里分享給大家，有需要的小伙伴直接拿走使用。2015-03-03
這篇文章主要介紹了JQuery上傳插件Uploadify使用，文章給出詳細(xì)的步驟來實現(xiàn)一個簡單的上傳功能，感興趣的小伙伴們可以參考一下2016-01-01
jquery 跳到頂部和底部動畫2句代碼簡單實現(xiàn)
使用2句代碼簡單實現(xiàn)jquery動畫的跳到頂部和底部；當(dāng)點擊頂部按鈕的時候，執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動條的距離，具體的實現(xiàn)如下，感興趣的朋友可以參考下2013-07-07
這篇文章主要介紹了jQuery處理圖片加載失敗的常用方法,實例演示了jQuery處理圖片加載失敗時提示加載失敗及隱藏加載失敗信息的方法,需要的朋友可以參考下2015-06-06
json數(shù)據(jù)是一種經(jīng)型的實時數(shù)據(jù)交互的數(shù)據(jù)存儲方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來給大家介紹jquery處理json數(shù)據(jù)方法。2014-06-06