本文主要详细介绍表单验证的jQuery实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
使用jQuery验证表单以供参考。具体情况如下
register.html
！文档类型html
html lang=en
头
meta charset=UTF-8
登记簿/标题
！-导入jQuery -
脚本src= js/jquery-3 . 3 . 1 . js /script
！-检查表格-
脚本
/*
表单验证：
1.用户名：长度为8到20个字符。
2.密码：单词字符，长度为8到20位。
3 .电子邮件：邮件格式
4.名称：非空白。
5.手机号码：手机号码的格式
6.出生日期：非空。
*/
//验证用户名
//字字符，长度为8到20位
函数检查用户名(){
//1.获取用户名值
var username=$(#username )。val()；
//2.定义检查的规律性
var reg _用户名=/^w{8,20}$/；
//3.确定是否满足验证要求，并给出提示信息。
var flag=reg_username.test(用户名)；
如果(标志){
//用户名合法
$(#username )。css(border ， )；
}否则{
//用户名非法，添加红色边框
$(#username )。css(边框， 1px纯红)；
}
//4.返回验证是否通过。
返回标志；
}
//验证密码
函数checkPassword() {
//1.获取密码值
var password=$(#password )。val()；
//2.定义常规
var reg _ password=/^w{8,20}$/；
//3.判断并给出提示信息。
var flag=reg _ password . test(password)；
如果(标志){
//密码合法
$(#password )。css(border ， )；
}否则{
//密码不合法，加红色边框
$(#password )。css(边框， 1px纯红)；
}
//4.返回验证是否通过。
返回标志；
}
//验证邮箱
函数checkEmail() {
//1.去拿邮箱
var email=$(#email )。val()；
//2.定义常规itcast@163.com
var reg _ email=/^w @ w 。 w $/；
//3.判断
var flag=reg _ email . test(email)；
如果(标志){
$(#email )。css(border ， )；
}否则{
$(#email )。css(边框， 1px纯红)；
}
//4.返回验证是否通过。
返回标志；
}
//检查名称
函数checkName() {
//1.得到名字
var name=$(#name )。val()；
//2.判断是否为空，返回验证是否通过。
if(type of name== undefined | | name==null | | name== ){
$(#name )。css(边框， 1px纯红)；
返回false
}否则{
$(#name )。css(border ， )；
返回true
}
}
//检查手机号码
功能检查电话(){
//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(电话)；
如果(标志){
$( #电话)。css(border ， )；
}否则{
$( #电话)。css(边框， 1px纯红)；
}
//4.返回验证是否通过。
返回标志；
}
//验证出生日期
函数checkBirthday() {
//1.得到出生日期
var生日=$( #生日)。val()；
//2.判断是否为空，返回验证是否通过。
如果(生日类型==未定义 ||生日==空||生日==) {
$(#name ).css(边框， 1px纯红);
返回错误的
}否则{
$(#name ).css(border ， )；
返回真实的
}
}
//进行校验
$(function () {
//当表单提交时，调用所有的校验方法
$(#registerForm ).提交（函数(){
//如果这个方法没有返回值，或者返回为没错，则表单提交，如果返回为假的，则表单不提交
//1.发送数据到服务器
如果(检查用户名()检查密码()检查电子邮件()检查姓名()检查电话()检查生日()){
//校验通过，发送创建交互式、快速动态网页应用的网页开发技术请求，提交表单的数据用户名=张三密码=123
$.post(registerServlet ，$(this).序列化()，函数（数据){
if (data.flag) {
//注册成功，跳转到成功页面
警报(注册成功!);
}否则{
//注册失败，给错误消息添加提示信息
$(#errorMsg ).html(数据。错误消息)；
}
});
}
//2.不让页面跳转
返回错误的
});
//当某一个组件失去焦点是，调用对应的校验方法
$(#username ).模糊(检查用户名)；
$(#password ).模糊(检查密码)；
$(#email ).模糊（检查电子邮件);
$(#name ).模糊(检查姓名)；
$( #电话)。模糊（检查电话);
$( #生日)。模糊(检查生日);
})
/脚本
/头
身体
差异
p用户注册/p
！-注册表单-
div id= error msg style= color:red；文本对齐：居中/格
表单id=注册表单操作=注册servlet 方法= post
table style= margin-top:25px；
tr
td class=td_left
=用户名的标签用户名/标签
/td
td class=td_right
输入类型= text id=用户名 name=用户名 placeholder=请输入账号
/td
/tr
tr
td class=td_left
=密码的标签密码/标签
/td
td class=td_right
输入类型= text id= password name= password placeholder=请输入密码
/td
/tr
tr
td class=td_left
=电子邮件电子邮件的标签/标签
/td
td class=td_right
输入类型= text id= email name= email placeholder=请输入电子邮件
/td
/tr
tr
td class=td_left
=名称的标签姓名/标签
/td
td class=td_right
输入类型= text id= name name= name placeholder=请输入真实姓名
/td
/tr
tr
td class=td_left
=电话的标签手机号/标签
/td
td class=td_right
输入类型= text id= telephone name= telephone placeholder=请输入您的手机号
/td
/tr
tr
td class=td_left
=性别的标签性别/标签
/td
td class=td_right gender
输入类型= radio id= sex name= sex value=男检查男
输入类型=单选名称=性别值=女 女
/td
/tr
tr
td class=td_left
=生日的标签出生日期/标签
/td
td class=td_right
输入类型=日期id=生日名称=生日占位符=年/月/日
/td
/tr
tr
td class=td_left
/td
td class=td_right check
输入类型=提交类=提交值=注册
span id= msg style= color:red；/span
/td
/tr
/表格
/表单
/div
/body
脚本
/脚本
/html
后台处理代码也可以不看，只是前后端进行交互需要，RegisterServlet.java
包com。演示。servlet
导入javax。servlet。servlet异常；
导入javax。servlet。注释。web servlet
导入javax。servlet。http。http servlet
导入javax。servlet。http。http servlet请求；
导入javax。servlet。http。http servlet响应；
导入Java。io。io异常；
导入Java。util。迭代器；
导入Java。util。地图；
导入Java。util。设置；
@WebServlet(/registerServlet )
公共类RegisterServlet扩展HttpServlet {
@覆盖
受保护的void doGet(http servlet请求req，HttpServletResponse resp)抛出ServletException，IOException {
MapString，String[]参数map=req。getparametermap()；
SetString keySet=参数映射。keySet()；
迭代器字符串迭代器=键集。迭代器()；
while (iterator.hasNext()) {
字符串键=迭代器。next()；
系统。出去。println(key):参数映射。get(key)[0])；
}
//String str={flag:true，errorMsg:注册失败};//错误范例
String str={flag:true ， errorMsg :注册失败};
resp。设置内容类型( application/JSON；charset=utf-8 )；
resp.getWriter().打印（字符串);
}
@覆盖
受保护的void doPost(http servlet请求req，HttpServletResponse resp)抛出ServletException，IOException {
this.doGet(req，resp)；
}
}
效果：
本节代码地址：演示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
