jQuery实现表单验证

article/2025/10/1 4:03:02

1.基于html表单，利用jQuery实现表单验证功能。

2.html基本结构和样式：
在这里插入图片描述
3.html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>美多商城-注册</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/register2.js"></script>
</head>
<body><div class="register_con"><div class="l_con fl"><a class="reg_logo"><img src="images/logo02.png"></a><div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div><div class="reg_banner"></div></div><div class="r_con fr"><div class="reg_title clearfix"><h1>用户注册</h1><a href="#">登录</a></div><div class="reg_form clearfix"><form id='myform'><ul><li><label>用户名:</label><input type="text" name="user_name" id="user_name"><span class="error_tip">提示信息</span></li>					<li><label>密码:</label><input type="password" name="pwd" id="pwd"><span class="error_tip">提示信息</span></li><li><label>确认密码:</label><input type="password" name="cpwd" id="cpwd"><span class="error_tip">提示信息</span></li><li><label>邮箱:</label><input type="text" name="email" id="email"><span class="error_tip">提示信息</span></li><li class="agreement"><input type="checkbox" name="allow" id="allow" checked="checked"><label>同意”美多商城用户使用协议“</label><span class="error_tip2">提示信息</span></li><li class="reg_sub"><input type="submit" value="注 册" name=""></li></ul>				</form></div></div></div><div class="footer no-mp"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a>		</div><p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p><p>电话：010-****888    京ICP备*******8号</p></div></body>
</html>

4.jquery表单验证代码：

$(function () {// 定义开关变量var flagUser=falsevar flagPwd=falsevar flagCpwd=falsevar flagEmail=falsevar flagAllow=true// 找到所在标签元素var $user_name = $('#user_name')var $pwd=$('#pwd')var $cpwd=$('#cpwd')var $email=$('#email')var $allow=$('#allow')var $submit=$('#myform')// 1.如果失去焦点，则进行检查判断用户名是否合法$user_name.blur(function () {// 封装函数 调用函数fnCheckUser()})function fnCheckUser() {// 获取用户输入的数据var vals = $user_name.val()// 正则，正则验证用户输入的数据是否合法var re = /^\w{6,20}$/if (vals == '') {$user_name.next().show().html('用户名不能为空')flagUser=falsereturn}if (re.test(vals)) {// 合法 -- 隐藏报错信息$user_name.next().hide()flagUser=true} else {// 不合法 -- 报错 -- 下面的span标签显示$user_name.next().show().html('用户名是6-20位数字、字母和下划线！')flagUser=false}}// 2.如果密码框失去焦点，则进行检查判断密码是否合法$pwd.blur(function(){// 封装函数，调用函数fnCheckPwd()})function fnCheckPwd(){// 获取密码框输入的数据var vals=$pwd.val()// 密码正则匹配表达式var rePass = /^[\w!-@#$%^&*]{6,20}$/// 如果输入框为空，则提示不能为空并returnif (vals==''){$pwd.next().show().html('密码不能为空')flagPwd=falsereturn}// 正则验证密码输入是否合法if(rePass.test(vals)){// 如果匹配成功，则隐藏span标签$pwd.next().hide()flagPwd=true}else{// 如果匹配失败，则显示span标签，替换提示信息$pwd.next().show().html('密码是6到20位字母、数字，还可包含@!#$%^&*-字符')flagPwd=false}}// 3.判断两次输入的密码是否一致$cpwd.blur(function(){// 封装函数，调用函数fnCheckCpwd()})function fnCheckCpwd(){// 获取重复密码框输入的数据var vals=$pwd.val()var cvals=$cpwd.val()if(cvals==''){$cpwd.next().show().html('重复密码框不能为空')flagCpwd=falsereturn  }if (vals==cvals){$cpwd.next().hide()flagCpwd=true}else{$cpwd.next().show().html('两次密码输入不一致，请重新输入')flagCpwd=falsereturn}}// 4.如果邮箱框失去焦点，则进行检查判断邮箱是否合法$email.blur(function(){// 封装函数，调用函数fnCheckEmail()})function fnCheckEmail(){// 获取邮箱框输入的数据var vals=$email.val()// 邮箱正则匹配表达式var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i// 如果输入框为空，则提示不能为空并returnif (vals==''){$email.next().show().html('邮箱不能为空')flagEmail=falsereturn}// 正则验证邮箱输入是否合法if(reMail.test(vals)){// 如果匹配成功，则隐藏span标签$email.next().hide()flagEmail=true}else{// 如果匹配失败，则显示span标签，替换提示信息$email.next().show().html('你输入的邮箱格式不正确')flagEmail=false}}// 5.点击同意协议复选框，判断是否勾选。如果勾选，则隐藏提示信息，没有勾选，则显示报错信息$allow.click(function(){fnCheckAllow()})// 封装函数function fnCheckAllow(){if($allow.prop('checked')){$allow.next().next().hide()flagAllow=true}else{$allow.next().next().show().html("请勾选同意协议")flagAllow=false}}// 6.所有输入框验证通过再提交注册$submit.submit(function(){if(flagUser && flagPwd && flagCpwd && flagEmail && flagAllow){alert('OK!')}else{alert("Not OK!")return false}})
})

5.总结归纳：

(1)jq常用的事件属性

ready() DOM加载完成
click() 鼠标单击
焦点相关事件
- blur() 元素失去焦点
- focus() 元素获得焦点
鼠标移入移出事件
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- mouseenter() 鼠标进入（进入子元素不触发）
- mouseleave() 鼠标离开（离开子元素不触发）
- hover() 同时为mouseenter和mouseleave事件指定处理函数
submit() 用户递交表单

当单击表单提交按钮时触发执行submit函数