jQValidator.js使用说明
简介：该插件是基于bootstrapvalidator.js进行修改编写的，写法类似，2.7+以上版本兼容现代主流浏览器
一、使用方法
1.引用jQuery.js / jQValidator.js / jQValidator.css
<link href="css/jQValidator.min.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 |
表单的第一个无效字段是否自动聚焦 |
|
isClearForm |
true |
页面初始加载时，是否清空表单参数。默认true v2.4+ |
|
clearButton |
null |
输入框清除按钮的class名称，如果不需要清楚按钮则可不设置 |
|
container |
null |
提示语句容器 |
|
singleVis |
true |
提示语句是否单条显示 |
|
tipsWay |
normal |
提示语句容器显示形式，值有两种： 1. normal： 正常显示（默认）； 2. tooltip： 提示工具弹框显示。当选择该形式时，singleVis 参数设置无效，提示语句自动只显示一条; 必须设置 “container” 参数值，即必须设置提示语句容器 |
|
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' |
生效规则，四种形式： 1. enabled： 字段值有变化就触发验证； 2. disabled： 当点击提交时验证并展示错误信息 3. submitted : 当点击提交时验证并展示错误信息 4. blurred: 输入框离焦时验证 |
|
language |
' cn ' |
提示语句显示语言，三种： 1. cn : 中文 2. en : 英文 3. ohter : 其他语言，需要自己设置提示语句message 如果自己设置了message提示语时，若是网站语言翻译，自主设置的message也得自主翻译 |
|
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: true /* * 若需要编辑提示语句 * notEmpty: { message: '此项为必填项' } */
2. stringLength：该控件字符个数， min为最小字符数，max为最大字符数；
stringLength: { min: 4, max: 8 }
3. identical：该控件必须与某控件的值相同
identical: { field: 'password', message: '两次密码不一致', ismain: true } /* * identical 校验新增 ismain 参数，默认值为false，启用版本 2.7.1+ * ismain : 当前进行identical校验的控件是否为主体，如输入密码和确认密码校验，输入密码为主体控件，即 ismain: true ； 确认密码为副体控件，则 ismain: false */
4. different: 该控件必须与某控件的值不同
different: { field: 'account',//需要进行比较的input name值 message: '不能和账号相同' }
5. phone：电话验证规则，'MB'—移动电话，'LD'—座机固定电话，' ALL ' —— 移动电话或座机电话
phone: { phoneType: 'LD',
isOpenHKM: false // 是否开启港澳手机校验, v2.7.2启用
}
6. idCard：身份证验证规则，18位验证
idCard: true /* * 如果需要编辑提示语句 * idCard: { message: '请输入正确的身份证号码' } */
7. emailAddress：邮箱验证规则
emailAddress: true /* * 如果需要编辑提示语句 * 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}
v2.7.3版本开始，获取的json数据正确data数据格式为： { result : { valid: true or false } }
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(); } */ }
10. file：附件上传类型验证。文件类型参考网址：https://blog.csdn.net/zhuyangru/article/details/70254789
file: { extension: 'png,jpg,jpeg,gif,rar,zip', type: 'image/png,image/jpg,image/jpeg,image/gif,application/octet-stream,application/x-zip-compressed' }
11. birthDate : 生日日期与身份证号码进行对比校验，v2.7+
birthDate: { idCardName: 'idNumber' // 身份证的name值 }
12. gender : 性别与身份证号码进行对比校验，规定 input[type='radio'] 的 val 值女性的为0，男性则为1 ， v2.7+
gender: { idCardName: 'idNumber' // 身份证的name值 }
13. bankCard：银行卡校验，限制数字，字符长度16-19， v2.7+
bankCard: true
14. QQNumber：QQ号码校验，限制数字，字符长度15位以内， v2.7+
QQNumber: true
15. pwdSafety：密码等级校验。需要输入至少包含两种类型（字母、数字、标点符号及特殊字符等）的密码， v2.7.1+
pwdSafety: true /* * 如需要编辑提示语句 * pwdSafety: { message: '请输入至少包含两种字符类型（字母、数字、标点符号及特殊字符等）的密码' } */
四、验证事件
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>
2. 对指定的字段更新验证状态
'NOT_VALIDATED' 没有经过验证
'VALIDATING' 验证中
'INVALID' 无效的
'VALID' 有效的
var jQValidator = $(".global-form-box").data('jQValidator');
jQValidator.updateStatus('username', 'VALID').validateField('username'); /// 更新所指定的 ' username ' 字段是有效的
3. 对指定的字段进行验证： validateField(field)
var jQValidator = $(".global-form-box").data('jQValidator');
jQValidator.updateStatus('username', 'NOT_VALIDATED').validateField('username'); /// 对 ' username ' 字段进行验证
4. 指定的字段验证是否正确： isValidField(field)
$(".global-form-box").data('jQValidator').isValidField('username') //// username 字段验证是否正确
5. 表单内所有字段值重置：
function globalFormFn(){
$( ".global-form-box" ).jQValidator({...});
}
$( '.global-form-box .btn-reset' ).click( function (){
$( ".global-form-box" ).data( 'jQValidator' ).resetForm( true );
globalFormFn();
})
6. 点击添加动态文本框验证：
<a href="javascript:void(0)" class="ctrl btn-addfield">点击添加</a> <script type="text/javascript"> // 点击添加动态文本框 var fieldIndex = 1; $('.btn-addfield').on('click', function(){ var htm = ''; htm += '<div class="form-row">'; htm += '<h4 class="tit">工作经历'+ fieldIndex +'</h4>'; htm += '<div class="form-group">'; htm += '<label class="control-label" for="workTime'+ fieldIndex +'"><i class="must">*</i>工作时间</label>'; htm += '<div class="form-group-cell">'; htm += '<input type="text" class="form-control" name="workTime'+ fieldIndex +'" id="workTime'+ fieldIndex +'"/>'; htm += '</div>'; htm += '</div></div>'; $('.frm-btn-group').before(htm); $('.global-form-box').jQValidator('addField', 'workTime'+fieldIndex, { validators: { notEmpty: true } }); fieldIndex++; }); </script>
7. 点击移除动态文本框验证：
<input class="form-control" name="workTime1"/>
<a href="javascript:void(0)" class="ctrl btn-removefield">点击移除验证</a> <script type="text/javascript"> // 点击移除验证 $('.btn-removefield').on('click', function(){ $('.global-form-box').jQValidator('removeField', 'workTime1'); }); </script>
8. 动态html及验证添加方法：AddFieldHtml()
启用版本： v2.8.0
该方法常用于简历中的工作经历、教育经历等多数据列表。
必须具备的结构或class：
1）列表外层 class="form-multidata-list" 且 添加自定义id，子元素item 需要添加 class="form-multidata-item" ；
2）列表外层class="form-multidata-list" 必须存在 "data-name" 值，主要是用于数据存储；
3) 增加按钮标签结构上必须存在 "data-list"值，主要用于增加html结构时查询父级容器。
PS: 动态html及验证移除方法在JQValidator.js里已经自动绑定，无需再额外调用。
可修改参数说明：
addBtnElem： this // 增加item按钮，可以直接传 this
deleteBtnElem：' ' // String, 删除按钮 class，默认class值为 '.btn-multidata-delete'
container: ' ' // String, 列表外层结构 id
max： // Number，item最多可显示的数量
onAddEnd: function(fieldIndex){} // 结构新增完成后执行的回调函数
onRemoveEnd: function(fieldIndex){} //结构删除后执行的回调函数
具体案例及使用方法如下：
html：
<!-- 教育经历开始 -->
<div class="form-row-wrap">
<div class="form-row-head">
<h4 class="form-row-lvtit">教育经历</h4>
</div>
<div class="form-row-body">
<div class="form-multidata-list" id="jiaoyulist" data-name="jiaoyu">
<div class="form-multidata-item">
<div class="form-multidata-item_body">
<div class="form-group">
<label class="control-label" for="time">起止时间</label>
<div class="form-group-cell">
<input type="text" class="form-control laydate-input" name="time" id="time">
</div>
</div>
<div class="form-group">
<label class="control-label" for="school">学校</label>
<div class="form-group-cell">
<input type='text' class="form-control" name="school" id="school" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="zhuanye">专业</label>
<div class="form-group-cell">
<input type='text' class="form-control" name="zhuanye" id="zhuanye" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="xueli">学历</label>
<div class="form-group-cell">
<input type='text' class="form-control" name="xueli" id="xueli" />
</div>
</div>
</div>
<div class="form-multidata-item_foot">
<a href="javascript: void(0)" class="btn-multidata-delete">删除</a>
</div>
</div>
</div>
<div class="form-multidata-tool">
<a href="javascript: void(0)" class="btn-multidata-add" data-list="jiaoyulist">+ 增加教育经历</a>
</div>
</div>
</div>
<!-- 教育经历结束 -->
Javascript
// 教育经历增加
$(".btn-multidata-add").on('click', function(){
var $this = $(this);
var listid = '#' + $(this).attr('data-list');
var jQValidator = $(this).parents('.global-form-box').data('jQValidator');
var addOptions = {
addBtnElem: this, // 增加按钮
deleteBtnElem: '.btn-multidata-delete', // 删除按钮
container: listid, // 新增结构外层容器
max: 3, // 结构最多新增数量
// 结构新增完成后执行函数
onAddEnd: function(fieldIndex){
// 起止时间事件绑定
lay('.laydate-input').each(function(){
laydate.render({
elem: this
,trigger: 'click'
,type: 'month'
,range: '~'
,format: 'yyyy-MM'
});
});
// 新增校验
jQValidator.addField('time_'+fieldIndex, {
validators: {
notEmpty: true
}
});
jQValidator.addField('school_'+fieldIndex, {
validators: {
notEmpty: true
}
});
jQValidator.addField('zhuanye_'+fieldIndex, {
validators: {
notEmpty: true
}
});
jQValidator.addField('xueli_'+fieldIndex, {
validators: {
notEmpty: true
}
});
},
// 结构删除后执行函数
onRemoveEnd: function(fieldIndex){
}
}
jQValidator.AddFieldHtml(addOptions);
});
9. 获取表单数据序列组：getFormDatas()
启用版本： v2.8.0
该方法是可以自动获取当前表单form里所有表单控件的数据值，以方便和验证接口数据校验。
下面代码案例中，可以根据项目实际情况向 formdatas 传递额外的数组数据，也可以不传递：
jQValidator.getFormDatas();
jQValidator.getFormDatas(newAdddata)；
/// 表单提交
$('.global-form-box .btn-submit').click(function(){
var jQValidator = $(this).parents('.global-form-box').data('jQValidator');
var newAdddata = [
{name: 'MenuId', value: '111aa'},
{name: 'ContentAuxId', value: '222bb'},
]
// 点击获取表单参数值
var formdatas = jQValidator.getFormDatas(newAdddata);
//for (let pair of formdatas.entries()) {
//console.log(pair[0] + ': ' + pair[1]);
//}
});
五、插件下载
github : https://github.com/TammyViola/jQValidatorJs
