BootstrapValidator校验使⽤⽅法和校验规则总结⼀.⾸先引⼊BootstrapValidator插件
BootstrapValidator插件需要jQuery和Bootstrap 3
引⼊js和css⽂件
<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
bootstrap检验方法
<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
<!--使⽤压缩过的版本-->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
<!--使⽤包含所有验证器的未压缩版本-->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>
⼆.添加验证规则
1.使⽤HTML添加简单验证
如果想对某⼀个字段添加验证规则，需要
包裹，input标签必须有name值，此值为验证匹配的字段。
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email"class="form-control" id="exampleInputEmail1" placeholder="Email"
data-bv-notempty="true"
data-bv-notempty-message="不能为空">
</div>
2.使⽤js添加验证
$('form').bootstrapValidator({
// 默认的提⽰消息
message:'This value is not valid',
// 表单框⾥右侧的icon
feedbackIcons:{
        valid:'glyphicon glyphicon-ok',
        invalid:'glyphicon glyphicon-remove',
        validating:'glyphicon glyphicon-refresh'
},
submitHandler:function(validator, form, submitButton){
// 表单提交成功时会调⽤此⽅法
/
/ validator: 表单验证实例对象
// form  jq对象指定表单对象
// submitButton  jq对象指定提交按钮的对象
},
fields:{
username:{
message:'⽤户名验证失败',
validators:{
notEmpty:{
message:'⽤户名不能为空'
},
stringLength:{//长度限制
min:6,
max:18,
message:'⽤户名长度必须在6到18位之间'
},
regexp:{//正则表达式
regexp:/^[a-zA-Z0-9_]+$/,
message:'⽤户名只能包含⼤写、⼩写、数字和下划线'
},
different:{//⽐较
field:'username',//需要进⾏⽐较的input name值
message:'密码不能与⽤户名相同'
},
identical:{//⽐较是否相同
field:'password',//需要进⾏⽐较的input name值
message:'两次密码不⼀致'
},
remote:{// ajax校验，获得⼀个json数据（{'valid': true or false}）
url:'user.php',//验证地址
message:'⽤户已存在',//提⽰信息
type:'POST',//请求⽅式
data:function(validator){//⾃定义提交数据，默认为当前input name值return{
act:'is_registered',
username:$("input[name='username']").val()
};
}
}
}
},
email:{
validators:{
notEmpty:{
message:'邮箱地址不能为空'
},
emailAddress:{
message:'邮箱地址格式有误'
}
}
}
}
});
三.在validators中⼀些验证规则的总结
1.判断字段是否为空
notEmpty:{
message:'⽤户名必填不能为空'
},
2.字段长度判断
stringLength:{
min:6,
max:30,
message:'⽤户名长度不能⼩于6位或超过30位'
},
3.通过正则表达式进⾏验证
regexp:{
regexp:/^[A-Z\s]+$/i,
message:'名字只能由字母字符和空格组成。'
}
4.⼤⼩写验证
stringCase:{
message:'姓⽒必须只包含⼤写字符。',
case:'upper'//其他值或不填表⽰只能⼩写字符
},
5.两个字段不相同的判断
different:{
field:'password',
message:'⽤户名和密码不能相同。'
}
emailAddress:{
message:'The input is not a valid email address'
}
7.⽇期格式验证
date:{
format:'YYYY/MM/DD',
message:'⽇期⽆效'
}
8.纯数字验证
digits:{
message:'该值只能包含数字。'
}
9.ajax验证
threshold :6,//有6字符以上才发送ajax请求，（input中输⼊⼀个字符，插件会向服务器发送⼀次，设置限制，6字符以上才开始）
remote:{//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得⼀个json数据。例表⽰正确：{"valid",true}
url:'exist2.do',//验证地址
message:'⽤户已存在',//提⽰消息
delay :2000,//每输⼊⼀个字符，就发ajax请求，服务器压⼒还是太⼤，设置2秒发送⼀次ajax（默认输⼊⼀个字符，提交⼀次，服务器压⼒太⼤）    type:'POST'//请求⽅式
},
10.复选框验证
choice:{
min:2,
max:4,
message:'请选择2-4项'
}
11.密码确认
identical:{
field:'confirmPassword',
message:'The password and its confirm are not the same'
},
12.判断输⼊数字是否符合⼤于18⼩于100
greaterThan:{
value:18
},
lessThan:{
value:100
}
13.uri验证
uri:{}
四、callback⾃定义校验规则
schoolName:{
validators:{
notEmpty:{
message:'请选择分⽀机构'
},
callback:{
message:'请选择分⽀机构',
callback:function(value, validator){
//这⾥可以⾃定义value的判断规则
if(value ==0){//"请选择"
//错误的参数值
return false;
}else{
//合格的参数值
return true;
}
}
}
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。