本文主要详细介绍表单验证的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)；
}
}
效果：
本节代码地址：演示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。