首页 > 代码库 > 表单验证插件之jquery.validate.js
表单验证插件之jquery.validate.js
提到表单验证的插件，第一个想到的就是jquery.validate.js，所以小生想在这里稍微详细地说一下这款插件的具体使用方法，便于理解，我直接附上整段demo的代码（没怎么调样式，主要是看js）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery表单验证插件jQuery.validate.js</title> <style type="text/css"> *{ margin: 0; padding: 0; } .myform{ width:800px; margin:30px auto; } .myform legend{ margin-left:30px; } p{ margin:30px; } .side{ text-align: center } em.success{ color:green; } em.error{ color:red; } /*还可以引入validation.css样式表，可以增加图标显示*/ </style> </head> <body> <form class="myform" id="myForm" method="get" action=""> <fieldset> <legend>注册账号</legend> <p> <label for="username">用户名</label> <input type="text" id="username" name="username"/> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password" value="" /> </p> <p> <label for="confirm_password">确认密码</label> <input type="password" id="confirm_password" name="confirm_password" value="" /> </p> <p> <label for="email">邮箱</label> <input id="email" name="email" class="required" /> </p> <p> <label for="tel">手机号码</label> <input id="tel" name="tel"/> </p> <p> <label for="url">项目链接</label> <input id="url" name="url" class="url"/> </p> <p> <label for="code">验证码</label> <input id="code" name="code" class="num"/> </p> <p> <label for="sex">性别</label> <select id="sex" name="sex"> <option value="0">男</option> <option value="1" class="woman">女</option> </select> </p> <p> <label for="">是否已婚</label> <label><input type="radio" value="0" name="married">是</label> <label><input type="radio" value="1" name="married">否</label> <label><input type="radio" value="2" name="married">离异</label> </p> <p> <label for="">爱好</label> <label><input type="checkbox" name="hobby_0" value="0" class="travel">旅游</label> <label><input type="checkbox" name="hobby_1" value="1">睡觉</label> <label><input type="checkbox" name="hobby_2" value="2">上网</label> <label><input type="checkbox" name="hobby_3" value="3">看电影</label> </p> <p> <input type="submit" name="submit" value="提交" class="btn_submit"/> </p> </fieldset> </form> <p class="side">此处填写的内容可以用来判断是否刷新了页面<input type="text" /></p> <script type="text/javascript" src="jquery-1.12.0.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <!-- 引入支持固定格式解析的jQuery插件，可以将验证规则全部编写到class属性中，当然我还没试过，好不好用就不知道了 --> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/javascript" > //DOM节点树生成后 $(document).ready(function() { //配置参数，选择器里放id或者class名都可以 $(".myform").validate({
//通过name属性来设置验证规则 rules: { username: { required:true, //也可以直接在标签里添加class="required" minlength:2 //设置最小长度 }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" //要求与指定元素的值相匹配 }, tel:{ number:true //也可以直接在标签里添加class="number" }, email:{ email:true //也可以直接在标签里添加class="email" }, url:"url", //可以直接在标签里添加class="url"，也可以像上面一样改成{url:true} code:{ calculate:"1+1" } }, //通过name属性来设置验证提示信息的内容 messages: { username: { required:"用户名必填", minlength:"至少2个字符", }, password: { required: "请输入密码", minlength: "密码不能少于6个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能少于6个字符", equalTo: "密码输入不一致" }, tel:{ required:"请输入手机号码", number:"请输入数字" }, email:"请输入一个邮件地址", url:"请输入一个网址" }, //自定义一个提交方法 submitHandler: function(form) { alert("已经提交!"); // form.submit(); $(form).ajaxSubmit();//和上面一行的结果一样，页面会被刷新一遍，不想刷新就用$.ajax()或者插件自带的remote方法 }, //想要不提交表单，只进行验证 debug:true, //忽略某些元素不验证 ignore:".ignore", //指明错误放置的位置，默认是把错误信息放在验证的元素后面 errorPlacement:function(error,element){ element.siblings(".success").remove();//为了解决错误信息与正确信息同时出现的问题 if (element.is(":radio")){ error.appendTo(element.parent().next().next()); }else if (element.is(":checkbox")){ error.appendTo (element.next()); }else{ error.appendTo(element.parent()); } }, //自定义验证提示信息的统一标签、样式和内容 errorElement:"em", //使用什么标签再把上边的errorELement包起来 //wrapper:"div", //把错误信息统一放在一个容器里面 //errorLabelContainer:"#messageBox", //label指向上面那个提示信息标签em，注意设置类名为success的样式，如果是提示错误信息，直接改类名为error的样式 success:function(label){ label.siblings("em").remove();//为了解决"可以啦"三个字会在每次验证正确时叠加在后面的问题 label.text("可以啦").removeClass("error").addClass("success"); }, //显示总共有多少个未通过验证的元素，用的时候会出现把这些元素的错误信息给隐藏掉的问题 // showErrors:function(errorMap,errorList){ // console.log("有"+this.objectLength(this.invalid)+"个未通过验证的元素"); // }, //修改验证的触发方式，以下均是boolean型 onsubmit:true,//提交是验证，默认为true //以下参数虽然默认都是true，但其中有一些除非改为false，否则直接写true会报错 // onfocusout:true,//失去焦点是验证(不包括checkboxes/radio buttons) // onkeyup:true,//在keyup时验证 // onclick:true,//在checkboxes和radio点击时验证 // focusInvalid:true,//提交表单后，未通过验证的表单会获得焦点 focusCleanup:false,//如果是true那么当未通过验证的元素获得焦点时，移除错误提示同，这时要避免和 focusInvalid 一起用 //异步验证，即使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项 // remote: { // url: "check-email.php", //后台处理程序 // type: "post", //数据发送方式 // dataType: "json", //接受数据格式 // data: { //要传递的数据 // username: function() { // return $("#username").val(); // } // } // } }); //自定义一个验证方法，两个参数，一个是方法名，另一是回调函数，有三个参数，第一个是当前被验证元素的值 ，第二个是当前被验证的元素，第三个是传入的参数 $.validator.addMethod("calculate",function(val,ele,param){ return val==eval(param) //return this.optional(ele) || val==eval(param)//不要求值为必填,如果将||改成&&会出现问题 },"请正确输入数学公式计算后的结果"); //为一个单独的元素添加验证规则，前提是validate()方法必须首先被调用 $("#url").rules("add",{ required:true }); $("#tel").rules("add",{ required:".travel:checked"//当旅游这个复选框被选中的时，手机号码就变成必填，还可以接一个function(){}，返回为真时需要验证 }) //检查是否验证通过 $(".btn_submit").on("click",function(){ console.log($(".myform").valid()); }) }); </script> </body> </html>
表单验证插件之jquery.validate.js
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。