JQuery实现表单验证(注册页面)

注册页面功能实现:

验证会员名密码不能为空或者包含空格，并且保证长度至少6位
验证邮箱符合规则，并且不能为空
重复密码要与密码一致

1.页面的样式

<form action="#">邮箱：<input type="text" name="email" id="email"><span id="email_msg"></span><br>用户名：<input type="text" name="username" id="username"><span id="username_msg"></span><br>密码：<input type="text" name="password" id="password"><span id="password_msg"></span><br>确认密码：<input type="text" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br><!-- onclick="return checkForm() 如果checkForm返回值是true，就提交表单，否则不提交表单--><input type="submit" name="submit" value="提交" onclick="return checkForm()"/>
</form>

2.编写JQuery代码进行表单验证

//是否为空function ifnull(txt){if(txt.length==0){return true;}var $reg=/\s+/;return $reg.test(txt);}
//验证表单
function checkForm(){//验证邮箱if(ifnull($("#email").val())){$("#email_msg").html("邮箱不能为空！");return false;}else{var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;if(!$reg.test($("#email").val())){$("#email_msg").html("邮箱格式错误！");return false;}}//验证用户名if(ifnull($("#username").val())){$("#username_msg").html("用户名不能为空！");return false;}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#username").val())){$("#username_msg").html("用户名至少6位");return false;}}//验证密码if(ifnull($("#password").val())){$("#password_msg").html("密码不能为空");return false;}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#password").val())){$("#password_msg").html("密码至少6位");return false;}}//确认密码是否为空if(ifnull($("#repassword").val())){$("#repassword_msg").html("请确认密码");return false;}//验证两次密码是否一致if($("#password").val()!=$("#repassword").val()){$("#repassword_msg").html("两次密码不一致");return false;}return true;
}

3、优化：Input标签失去焦点后进行验证

//在id为email的元素失去焦点时进行邮箱的验证
$("#email").blur(function(){if(ifnull($(this).val())){$("#email_msg").html("邮箱不能为空");}else{var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;if(!$reg.test($("#email").val())){$("#email_msg").html("邮箱格式错误！");}else{$("#email_msg").html("√").CSS("color","green");}}
});
//在id为username的元素失去焦点时进行用户名的验证
$("#username").blur(function(){if(ifnull($(this).val())){$("#username_msg").html("用户名不能为空");}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#username").val())){$("#username_msg").html("用户名至少要6位哦");}else{$("#username_msg").html("√");}}
});
//在id为password的元素失去焦点时进行密码的验证
$("#password").blur(function(){if(ifnull($(this).val())){$("#password_msg").html("用户名不能为空");}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#password").val())){$("#password_msg").html("密码至少要6位哦");}else{$("#password_msg").html("√");}}
});
//在id为repassword的元素失去焦点时进行密码的验证
$("#repassword").blur(function(){if(ifnull($(this).val())){$("#repassword_msg").html("请确认密码");}else{if($("#password").val()!=$("#repassword").val()){$("#repassword_msg").html("两次密码不一致");}else{$("#repassword_msg").html("√");}}
});

4、效果图片

5.全部代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JQuery实现表单验证</title></head><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><body><form action="#">邮箱：<input type="text" name="email" id="email"><span id="email_msg"></span><br>用户名：<input type="text" name="username" id="username"><span id="username_msg"></span><br>密码：<input type="text" name="password" id="password"><span id="password_msg"></span><br>确认密码：<input type="text" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br><!-- onclick="return checkForm() 如果checkForm返回值是true，就提交表单，否则不提交表单--><input type="submit" name="submit" value="提交" onclick="return checkForm()"/></form></body><script type="text/javascript">//是否为空function ifnull(txt){if(txt.length==0){return true;}var $reg=/\s+/;return $reg.test(txt);} //在id为email的元素失去焦点时进行邮箱的验证$("#email").blur(function(){if(ifnull($(this).val())){$("#email_msg").html("邮箱不能为空");}else{var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;if(!$reg.test($("#email").val())){$("#email_msg").html("邮箱格式错误！");}else{$("#email_msg").html("√").CSS("color","green");}}});//在id为username的元素失去焦点时进行用户名的验证$("#username").blur(function(){if(ifnull($(this).val())){$("#username_msg").html("用户名不能为空");}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#username").val())){$("#username_msg").html("用户名至少要6位哦");}else{$("#username_msg").html("√");}}});//在id为password的元素失去焦点时进行密码的验证$("#password").blur(function(){if(ifnull($(this).val())){$("#password_msg").html("用户名不能为空");}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#password").val())){$("#password_msg").html("密码至少要6位哦");}else{$("#password_msg").html("√");}}});//在id为repassword的元素失去焦点时进行密码的验证$("#repassword").blur(function(){if(ifnull($(this).val())){$("#repassword_msg").html("请确认密码");}else{if($("#password").val()!=$("#repassword").val()){$("#repassword_msg").html("两次密码不一致");}else{$("#repassword_msg").html("√");}}});//验证表单function checkForm(){//验证邮箱if(ifnull($("#email").val())){$("#email_msg").html("邮箱不能为空！");return false;}else{var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;if(!$reg.test($("#email").val())){$("#email_msg").html("邮箱格式错误！");return false;}}//验证用户名if(ifnull($("#username").val())){$("#username_msg").html("用户名不能为空！");return false;}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#username").val())){$("#username_msg").html("用户名至少6位");return false;}}//验证密码if(ifnull($("#password").val())){$("#password_msg").html("密码不能为空");return false;}else{var $reg=/^\w{6,}$/;if(!$reg.test($("#password").val())){$("#password_msg").html("密码至少6位");return false;}}//确认密码是否为空if(ifnull($("#repassword").val())){$("#repassword_msg").html("请确认密码");return false;}//验证两次密码是否一致if($("#password").val()!=$("#repassword").val()){$("#repassword_msg").html("两次密码不一致");return false;}return true;}</script>
</html>

JQuery实现表单验证(注册页面)相关推荐

html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
基于猫冬的 jQuery formValidator表单验证的asp.net 控件
为了方便在asp.net中使用,封装了一下 <猫冬的 jQuery formValidator表单验证> 控件其实也不是什么控件,只是一个类,方便生成前台js. 特点: 1.后台生成的 ...
Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
jQuery的表单验证
jQuery的表单验证直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

JQuery实现表单验证(注册页面)

JQuery实现表单验证(注册页面)相关推荐

最新文章

热门文章