bootstrapValidator.min.js表单验证插件
本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下
注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可。
测试代码:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title></title> <style> table{ width:690px; } th{ padding-left:23%; padding-bottom:20px; } td{ width:110px; } b{ color:#f00; } </style> </head> <body> <!--表单--> <divclass="ctn"> <formclass="fm"method="post"onsubmit="returndoTable()"> <tablealign="center"> <thclass="perWl"align="left"colspan="2">物流服务商</th> <tr> <tdclass="txt"align="right"width="100">登陆名称:</td> <tdclass="wlIconicon"> <s></s> <inputtype="text"name="lgname"maxlength="20"/> <b>*</b> <span></span> </td> </tr> <tr> <tdclass="txt"align="right">密码:</td> <tdclass="wlIconicon"> <sclass="mm"></s> <inputtype="password"name="password"maxlength="18"/> <b>*</b> <span></span> </td> </tr> <tr> <tdclass="txt"align="right">确认密码:</td> <tdclass="wlIconicon"> <sclass="mm"></s> <inputtype="password"name="repass"maxlength="18"/> <b>*</b> <span></span> </td> </tr> <tr> <tdclass="wlBtns"align="center"colspan="2"> <s></s> <buttontype="submit">注册</button> <buttonclass="cancel"type="submit">取消</button> </td> </tr> </table> </form> </div> <scriptsrc="js/jquery-1.11.3.js"></script> <scriptsrc="js/bootstrapValidator.min.js"></script> <scripttype="text/javascript"> /*表单验证*/ vargets=true;//是否让表单提交 $(function(){ //提示信息=========================================== $("input[name=lgname]").focus(function(){ if($(this).val()==this.defaultValue){ $(this).val(''); } }).blur(function(){ if($(this).val()==''){ $(this).val(this.defaultValue); } }); //当输入框失去焦点的时候,需要执行的方法 $("input[name=lgname]").blur(function(){doLgname();}); $("input[name=password]").blur(function(){doPassword();}); $("input[name=repass]").blur(function(){doRepass();}); }); //登陆名称的验证========================== functiondoLgname(){ vart=$("input[name=lgname]"); varspan=t.next(); if(/^\w{6,16}$/.test(t.val())){ span.html("填写正确").css({color:"green",fontSize:"12px"}); returntrue; }else{ span.html("包含数字、字母、下划线,长度在6-16之间").css({color:"#ec4e4e",fontSize:"12px"}); returnfalse; } } //密码的验证========================== functiondoPassword(){ vart=$("input[name=password]"); varspan=t.next(); if(t.val()==''){ span.html("密码不能为空").css({color:"#ec4e4e",fontSize:"12px"}); returnfalse; }else{ span.html(''); if(/.{15,}/.test(t.val())){ span.html("密码长度不合法"); returnfalse; } returntrue; } } //确认密码的验证========================== functiondoRepass(){ vart=$("input[name=repass]"); varspan=t.next(); if(t.val()==$("input[name=password]").val()&&t.val()!=''){ span.html("填写正确").css({color:"green",fontSize:"12px"}); returntrue; }else{ span.html("两次密码不一致").css({color:"#ec4e4e",fontSize:"12px"}); returnfalse; } } //数据提交的时候执行的方法 functiondoTable(){ varlg=doLgname(); varpass=doPassword(); varrepass=doRepass(); if(lg&&pass&&repass){ returntrue; }else{ returnfalse; } } </script> </body> </html>
表单插件:bootstrapValidator.min.js下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。