jQuery表单验证详解：初学者实践指南

发表时间: 2018-02-05 15:30
先看效果：

完整代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><fieldset><legend>表单验证</legend><form id="myform" name="myform" onsubmit=" return formValidator();"><table ><tr><td>用户名：</td><td><input type="text" id="user"></td><!--用于提示的div--><td><div id="userTip"></div></td></tr><tr><td>密码：</td><td><input type="password" id="pwd"></td><!--用于提示的div--><td><div id="pwdTip"></div></td></tr><tr><td>确认密码：</td><td><input type="password" id="repwd"></td><!--用于提示的div--><td><div id="repwdTip"></div></td></tr><tr><td>email地址：</td><td><input type="text" id="email"></td><!--用于提示的div--><td><div id="emailTip"></div></td></tr><tr><td><input type="submit" value="注册" id="rigist"></td></tr></table></form></fieldset><script>var userVal=$("#user").val();$("#user").focus(function () {$("#userTip").text("请输入英文或数字，长度为6--12").css({"color": "black","font-family": "normal"});}).blur( userValidator);//这里的函数不用加括号 //2.密码验证$("#pwd").focus(function () {$("#pwdTip").text("请输入英文，长度在6至8之间").css({"color": "black","font-family": "normal"});}).blur(pwdValidator);//这里的函数不用加括号 //3.重复密码验证$("#repwd").focus(function () {$("#repwdTip").text("请输入英文，长度在6至8之间").css({"color": "black","font-family": "normal"});}).blur( repwdValidator);//这里的函数不用加括号 //4.email验证$("#email").focus(function () {$("#emailTip").text("请输入email").css({"color": "black","font-family": "normal"});}).blur(emailValidator);//这里的函数不用加括号 //表单提交验证function userValidator () {var regExp = /^[a-zA-Z0-9]{6,12}$/;var reg=/^[a-z0-9_-]{3,16}$/;var $myVal = $("#user").val();if ($myVal == "" || $myVal == null){$("#userTip").text("用户名不能为空").css({"color": "red","font-family": "bold"});return false;}//正则表达式匹配else if(!regExp.test($myVal)){$("#userTip").text("用户名输入错误").css({"color": "red","font-family": "bold"});return false;}else {$("#userTip").text("用户名输入正确").css({"color": "green","font-family": "bold"});return true;}}function pwdValidator() {var $myPwdVal=$("#pwd").val();var regExp=/^[a-zA-Z]{6,8}$/if($myPwdVal==""||$myPwdVal==null){$("#pwdTip").text("密码不能为空").css({"color": "red","font-family": "bold"});return false;}else if(!regExp.test($myPwdVal)){$("#pwdTip").text("密码输入错误").css({"color": "red","font-family": "bold"});return false;}else{$("#pwdTip").text("密码输入正确").css({"color": "green","font-family": "bold"});return true;}}function repwdValidator() {var $myPwdVal=$("#pwd").val();var regExp=/^[a-zA-Z]{6,8}$/var $myrePwdVal=$("#repwd").val();if($myPwdVal==""||$myPwdVal==null){$("#repwdTip").text("密码不能为空").css({"color": "red","font-family": "bold"});return false;}else if(!regExp.test($myPwdVal)){$("#repwdTip").text("密码输入错误").css({"color": "red","font-family": "bold"});return false;}//两次密码输入是否一致else if($myPwdVal!=$myrePwdVal){$("#repwdTip").text("密码输入不一致").css({"color": "red","font-family": "bold"});return false;}else{$("#repwdTip").text("密码输入正确").css({"color": "green","font-family": "bold"});return true;}}function emailValidator() {if($("#email").val()==""||$("#email").val()==null){$("#emailTip").text("email不能为空").css({"color": "red","font-family": "bold"});return false;}else{$("#emailTip").text("email输入正确").css({"color": "green","font-family": "bold"});return true;}}<!--防止错误提交的验证-->function formValidator() {if(userValidator()&&pwdValidator()&&repwdValidator()&&emailValidator()){alert("验证成功");return true;}else{alert("验证失败");return false;}}</script></body></html>
//以上代码有不明白的可以评论，一起学习！
jQuery表单验证详解：初学者实践指南

先看效果：

完整代码：

热门阅读

推荐阅读
