jquery validate demo 基础
jQueryValidate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供了一个用来编写用户自定义方法的API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他37种语言。
下面通过一段代码demo给大家讲解jqueryvalidate,具体代码如下所示:
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <scripttype="text/javascript"src="js/jquery-1.11.1.js"></script> <scripttype="text/javascript"src="js/jquery.validate-1.14.0.js"></script> <scripttype="text/javascript"> $().ready(function(){ varvalidate=$("#signupForm").validate({ rules:{ firstname:"required", email:{ required:true, email:true }, password:{ required:true, minlength:5 }, confirm_password:{ required:true, minlength:5, equalTo:"#password" } }, messages:{ firstname:"请输入姓名", email:{ required:"请输入Email地址", email:"请输入正确的email地址" }, password:{ required:"请输入密码", minlength:"密码不能小于{0}个字符" }, confirm_password:{ required:"确认密码", minlength:"确认密码不能小于5个字符", equalTo:"两次输入密码不一致不一致" } }, //把错误信息放到一处处理与errorPlacement函数连用 groups:{ login:"firstnameemailpasswordconfirm_password" }, errorPlacement:function(error,element){ error.insertBefore("#error_info"); }, //提交表单后焦点在第一个错误表单内 focusInvalid:true, //指定错误提示的css类名 errorClass:"error_info", //指定验证通过的css类名 validClass:"success_info", //验证通过提交表单 submitHandler:function(form){ console.info("提交表单"+$(form).serialize()); }, invalidHandler:function(event,validator){ console.info("表单错误"+validate.numberOfInvalids()); }, //取消某个元素的校验 ignore:"#firstname", onfocusout:function(){ returnfalse; } }); $("#check").click(function(){ varflag1=$("#signupForm").valid();//检查表单是否有效 varflag2=$("#firstname").rules();//查询元素的校验规则 varflag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则 varflag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则 varflag5=validate.form();//验证表单是否有效 varflag6=validate.element("#firstname");//验证表单某个元素是否有效 validate.resetForm();//恢复表单原来的状态 varflag7=validate.numberOfInvalids();//获得错误元素个数 console.info(flag7); }); //针对某个元素显示特定的提示信息 validate.showErrors({ firstname:"ERROR" }); }); </script> </head> <body> <formid="signupForm"method="get"action=""> <pid="error_info"> <labelfor="firstname">Firstname</label> <inputid="firstname"name="firstname"/> </p> <p> <labelfor="email">E-Mail</label> <inputid="email"name="email"/> </p> <p> <labelfor="password">Password</label> <inputid="password"name="password"type="password"/> </p> <p> <labelfor="confirm_password">确认密码</label> <inputid="confirm_password"name="confirm_password"type="password"/> </p> <p> <inputclass="submit"type="submit"value="Submit"/> </p> <p> <inputclass="c"type="button"value="检查表单是否有效"id="check"/> </p> </form> </body> </html>
以上就是本文的全部内容,代码简单明了,非常具有参考借鉴价值,希望大家喜欢。