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>
以上就是本文的全部内容，代码简单明了，非常具有参考借鉴价值，希望大家喜欢。