简介：该插件是基于bootstrapvalidator.js进行修改编写的，写法类似，可兼容ie7+以上
一、使用方法
1.引用jQuery.js / jQValidator.js / jQValidator.css
<link href="css/jQValidator.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQValidator.min.js"></script>
2.编写HTML
<form class="global-form-box">
<div class="form-group">
<label class="control-label" for="tel"><i class="must">*</i>电话：</label>
<div class="form-group-cell">
<div class="frm-ctrl-box">
<input type="text" class="form-control" name="tel" id="tel"/>
<a class="frm-ctrl-clear"></a>
</div>
</div>
</div>
</form>
(1) 表单控件整体结构及class如上所示，如果不需要表单控件内容的删除按钮，可以去掉 “ frm-ctrl-box “ 和 ” frm-ctrl-clear ” 这两个结构，只需在 “ form-group-cell ” 里保留<input/>结构即可；
(2) class = “ form-group-cell ” 可以更改为 “ form-group-bd ” ，只限这两种。
3.编写css样式
可以根据设计稿的情况，在jQValidator.css直接修改相关样式或在自己的样式表中书写新的样式覆盖。
4.调取插件
<script type="text/javascript">
$(".global-form-box").jQValidator();
</script>
二、参数说明（具体可参考bootstrapValidator的参数设定）
|
参数 |
默认值 |
说明 |
|
autoFocus |
true |
表单的第一个无效字段是否自动聚焦 |
|
clearButton |
null |
输入框清除按钮的class名称，如果不需要清楚按钮则可不设置 |
|
elementClass |
‘bv-form‘ |
表单的class |
|
feedbackIcons |
{...} |
验证图标class名称，可自定义样式 valid: ‘glyphicon glyphicon-ok‘, invalid: ‘glyphicon glyphicon-remove‘, validating: ‘glyphicon glyphicon-refresh‘ |
|
excluded |
[‘:disabled‘, ‘:hidden‘, ‘:not(:visible)‘] |
指定不验证的情况 |
|
fields |
null |
{}, 表单控件验证规则组 |
|
group |
‘.form-group‘ |
表单控件的容器class |
|
live |
‘enabled‘ |
生效规则： enabled 字段值有变化就触发验证； disabled, submitted 当点击提交时验证并展示错误信息 |
|
message |
‘This value is not valid‘ |
默认提示信息 |
|
submitButtons |
‘[type="submit"]‘ |
表单提交按钮 |
|
threshold |
null |
Number类型，为每个字段设置统一的开始验证情况，当输入字符大于等于设置的数值后才实时触发验证 |
|
submitHandler |
Null |
表单提交函数 submitHandler: function(validator, form, submitButton) {} // validator 表单验证实例对象 // form jq对象，指定表单对象 // submitButton jq对象，指定表单提交对象 |
三、验证规则
1. notEmpty：控件不能为空，必填项；
notEmpty: {
message: ‘请输入您的账号’
}
2. stringLength：该控件字符个数， min为最小字符数，max为最大字符数；
stringLength: {
min: 4,
max: 8,
message: ‘字符长度需要在6-12字符间’
}
3. identical：该控件必须与某控件的值相同
identical: {
field: ‘password‘,
message: ‘两次密码不一致‘
}
4. different: 该控件必须与某控件的值不同
different: {
field: ‘account‘,//需要进行比较的input name值
message: ‘不能和账号相同‘
}
5. phone：电话验证规则，‘MB‘—移动电话，‘LD‘—座机固定电话
phone: {
message: ‘请输入正确的电话号码‘,
phoneType: ‘LD‘
}
6. idCard：身份证验证规则，15或18位验证
idCard: {
message: ‘请输入正确的身份证号码‘
}
7. emailAddress：邮箱验证规则
emailAddress: {
message: ‘请输入正确的邮箱地址‘
}
8. regexp：自定义验证的正则表达式
regexp: {
regexp: /^1[34578]\d{9}$/,
message: ‘请填写正确的联系电话‘
}
9. remote：ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
remote: {
url: ‘exist2.do‘,//验证地址
message: ‘用户已存在‘,//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: ‘POST‘//请求方式
/**自定义提交数据，默认值提交当前input value
* data: function(validator) {
return {
password: $(‘[name="passwordNameAttributeInYourForm"]‘).val(),
whatever: $(‘[name="whateverNameAttributeInYourForm"]‘).val();
}
*/
}
四、验证事件
1. 自定义表单提交按钮
<form class="form-login-box">
<div class="frm-btn-group">
<a href="javascript:void(0)" class="btn btn-org btn-login-submit">登录</a>
</div>
</form>
<script type="text/javascript">
$(‘.btn-login-submit‘).click(function(){
/// 点击提交按钮进行校验
$(‘.form-login-box‘).data(‘jQValidator‘).validate();
/// bool, 所有字段验证是否正确
var isValid = $(‘.form-login-box‘).data(‘jQValidator‘).isValid();
if(isValid){
////// 如果正确，执行的函数
}
});
</script>