validate插件使用
引入js
使用：
（1）控件属性方式
（2）JS 键值对传参方式
$(function(){
$("#f1").validate(
{
/*
* 表单校验，两大元素：
* 校验规则
* 对应的提示
*
*/
//规则部分
rules:{
//校验账号
username:{
//账号的校验规则
required:true
}
},
//错误提示部分
messages:{
//账号错误提示
username:{
required:"账号必填"
}
}
});
});
校验规则：
| 规则名 | 说明 |
|---|---|
| required:true | 必须输入字段 |
| email:true | 必须输入正确格式的电子邮件 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期（IE6 验证出错） |
| dateISO:true | 必须输入正确格式的日期(ISO) （只验证格式， 不验证有效） |
| number:true | 必须输入合法的数字(负数，小数) |
| digits:true | 必须输入正整数 |
| creditcard:true | 必须输入合法的信用卡号，例如：5105105105105100 |
| equalTo:”#field” | 输入值必须和#field 相同 equalTo:"input[name='pwd']" |
| minlength:5 | 输入长度最小是 5 的字符串(汉字算一个字符) |
| maxlength:10 | 输入长度最多是 10 的字符串(汉字算一个字符) |
| rangelength:[5,10] | 输入长度介于 5 和 10 之间的字符串”)(汉字算一个字符) |
| range:[5,10] | 输入值必须介于 5 和 10 之间 |
| min:5 | 输入值不能小于 5 |
| max:10 | 输入值不能大于 10 |
| remote:”check.php” | 使用 ajax 方法调用 check.php 验证输入值 |
开启调试模式禁止提交
当我们在调试时，只需要检测能否验证，而不需要页面进行跳转时，可以开启调试模式禁止提交
$('#reg').validate({
debug : true,
});
当我们需要阻止表单提交的时候，还要执行程序，这时就可以设置其他方式代替默认提交
$('#reg').validate({
submitHandler : function(){
// some action
},
});
设置成功后加载的样式
Validate.js插件内置的验证成功的样式为”valid”，我们可以在CSS样式中自定义valid的样式：
.valid{
background: url(right.png) no-repeat right;
background-size: auto 100%;
border: 2px solid green;
}
当然，也可以修改验证提示消息，可以自定义标签的样式以及添加文字说明：
success : function(label){
label.addClass('labelStyle').text('ok');
},
高亮显示有错误的元素
highlight : function(element,errorClass){
$(element).css('border','3px solid red');
},
当输入成功时，需要取消高亮显示的错误，需要用到unhighlight：
unhighlight : function(element,errorClass){
$(element).css('border','1px solid green');
}
remote异步验证
remote:url，可以对表单进行 ajax 验证，默认会提交当前验证的值到远程地址。例如我们在注册时，需要通过后台服务器验证该账号是否被注册，这时就需要用到ajax，其具体使用方法可参照下面：rules : {
user : {
required : true,
rangelength:[3,5],
remote : 'user.php',
}
},
messages : {
user : {
required : '帐号不得为空！',
rangelength : '帐号长度需要在 {0}-{1} 位之间！',
remote : '账号被占用',
},
},
validation怎么显示错误提示的
1、错误提示是validation自己添加的
2、怎么添加，在当前输入项后面是一 label 标签添加
3、设置的两个属性：
class = "error"
for = "输入项的name值"
可以使用 CSS 修改错误提示的样式
使用 label标签 或 error 这个 class
label {
color: red;
}
.error {
color: red;
}
要让错误提示在输入项后面换行
可以自定义错误标签的位置
使用label 标签，里面必须属性 class="error" for="name值"
编写实现自定义类型
$.validator.addMethod("校验类型名",function(value){
该校验的算法实现 });
使用
validate 函数中，使用，使用语法和 内置的校验类型一样