jQuery實現表單驗證
使用jQuery實現表單驗證，供大傢參考，具體內容如下
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊</title>
<!--導入jQuery-->
<script src="js/jquery-3.3.1.js"></script>
<!--進行表單校驗-->
<script>
/*
表單校驗：
1.用戶名：單詞字符，長度8到20位
2.密碼：單詞字符，長度8到20位
3.email：郵件格式
4.姓名：非空
5.手機號：手機號格式
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.定義正則 [email protected]
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;
}
}
// 校驗手機號
function checkTelephone() {
// 1.獲取手機號
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;
}
}
// 進行校驗
$(function () {
//當表單提交時，調用所有的校驗方法
$("#registerForm").submit(function () {
// 如果這個方法沒有返回值，或者返回為true，則表單提交，如果返回為false，則表單不提交
// 1.發送數據到服務器
if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) {
// 校驗通過,發送ajax請求，提交表單的數據 username=zhangsan&password=123
$.post("registerServlet", $(this).serialize(), function (data) {
if (data.flag) {
// 註冊成功，跳轉到成功頁面
alert("註冊成功！");
} else {
//註冊失敗,給errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.不讓頁面跳轉
return false;
});
//當某一個組件失去焦點是，調用對應的校驗方法
$("#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">手機號</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="請輸入您的手機號">
</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>
後臺處理代碼也可以不看，隻是前後端進行交互需要，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);
}
}
效果：
本節代碼地址：Demo
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。