<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery表单验证</title> <!--百度在线压缩地址--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <!--创建表单验证步骤 :--> <!-- 1:先给表单元素设置blur(获取焦点事件)判断各个输入框内的值是否匹配 2:当表单提交时可以触发所有表单的blur(获取焦点事件) 3:把所有的表单元素进行综合判断看是否有问题 --> <!--样式--> <style> span{ color:red; font-size: 14px; display: none; } .wrap{ width:100%; height:100%; } #divid{ width:310px; height: 400px; padding-top:100px; margin:0 auto; } </style> </head> <body> <!--在method上,get值是显示表单内容,post值是不显示表单内容--> <div class="wrap"> <div id="divid"> <form action="reg.php" method="get"> <p>用户名:</p> <p> <input type="text" name="username" class="auth"> <span class="error">用户名至少6位!</span> </p> <p>密码:</p> <p> <input type="password" name="password" class="auth"> <span class="error">密码至少8位!</span> </p> <p>确认密码:</p> <p> <input type="password" name="repassword" class="auth"> <span class="error">两次密码必须一致!</span> </p> <p>邮箱:</p> <p> <input type="text" name="email" class="auth"> <span class="error">邮箱格式不正确!</span> </p> <p>手机号码:</p> <p> <!--注意手机号码位数要限制在11位--> <input type="text" name="phone" class="auth" maxlength="11"> <span class="error">手机号码不正确!</span> </p> <p><input type="submit" value="提交" ></p> </form> </div> </div> <script> //匹配用户名: $("input[name=username]").blur( function(){ //获取输入内容的长度 this表示获取元素的DOM写法 var val= this.value; //再判断这个内容的长度是否小于限定范围 if(val.length<2){ //给Jquery对象加一个属性,不影响元素本身,用于判断是否都已经输入正确 $(this).data({"s":0}); //如果小于,则将这个对象($(this)表示获取元素的Jquery写法)的下一个紧跟元素调用show()方法显示出来 $(this).next().show(); }else{ //给元素用Jquery加一个属性,不影响标签本身 $(this).data({"s": 1}); //如果条件不满足,则调用方法还是将下一个元素调用hide()方法隐藏 $(this).next().hide(); } } ); //匹配密码: $("input[name=password]").blur( function(){ var val= this.value; if(val.length<8){ $(this).data({"s":0}); $(this).next().show(); }else{ $(this).data({"s":1}); $(this).next().hide(); } } ); //匹配二次密码: $("input[name=repassword]").blur( function(){ //获取第一次输入密码 var oneVal = $("input[name=password]").val(); //获取第二次输入的密码 var thisVal= this.value; //判断输入框是否为空 if(thisVal.length == 0){ $(this).data({"s":0}); $(this).next().html("确认密码不能为空").show(); //判断输入的内容是否和第一次密码一致 } else if(oneVal != thisVal){ $(this).data({"s":0}); $(this).next().html("两次密码必须一致").show(); }else{ $(this).data({"s":1}); $(this).next().hide(); } } ); //匹配邮箱: $("input[name=email]").blur( function(){ var val= this.value; if(!val.match(/^\w+@\w+\.+\w+$/i)){ $(this).data({"s":0}); $(this).next().show(); }else{ $(this).data({"s":1}); $(this).next().hide(); } } ); //匹配手机: $("input[name=phone]").blur( function(){ var val= this.value; if(!val.match(/^1[3|4|5|7| 8]+\d{9}/)){ $(this).data({"s":0}); $(this).next().show(); }else{ $(this).data({"s":1}); $(this).next().hide(); } } ); //提交表单前综合验证 $("form").submit(function(){ //提交表单按钮每点击一次就获取所有的class类名为auth的输入框的焦点进行判断 $(".auth").blur(); //定义一个计数器,计算表单输入框的填写正确数量 tot = 0; //对输入框进行遍历 $(".auth").each( //然后把所有的计数器取出,再赋值给计数器 function(){ tot += $(this).data("s"); } ); //判断输入框匹配数量是否正确 if(tot!=5){ //如果不正确就返回false阻止表单提交 return false; } alert("表单提交成功!"); }); </script> </body> </html>
[封装插件]Jquery制作完整表单验证示例
最新推荐文章于 2022-05-31 00:05:32 发布