简介:该插件是基于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 | 表单的第一个无效字段是否自动聚焦 |
isClearForm | true | 页面初始加载时,是否清空表单参数。默认true v2.4 |
clearButton | null | 输入框清除按钮的class名称,如果不需要清楚按钮则可不设置 |
container | null | 提示语句容器 |
singleVis | true | 提示语句是否单条显示 |
tipsWay | normal | 提示语句容器显示形式,值有两种: 1. normal: 正常显示(默认); 2. tooltip: 提示工具弹框显示。当选择该形式时,singleVis 参数设置无效,提示语句自动只显示一条 |
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
2. stringLength:该控件字符个数, min为最小字符数,max为最大字符数;
stringLength: {
min: 4,
max: 8
}
3. identical:该控件必须与某控件的值相同
identical: {
field: 'password',
message: '两次密码不一致'
}
4. different: 该控件必须与某控件的值不同
different: {
field: 'account',//需要进行比较的input name值
message: '不能和账号相同'
}
5. phone:电话验证规则,'MB'—移动电话,'LD'—座机固定电话,' ALL ' —— 移动电话或座机电话
phone: {
phoneType: 'LD'
}
6. idCard:身份证验证规则,15或18位验证
idCard: true
7. emailAddress:邮箱验证规则
emailAddress: true
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();
}
*/
}
10. file:附件上传类型验证。文件类型参考网址:https://blog.csdn.net/zhuyangru/article/details/70254789
file: {
extension: 'png,jpg,jpeg,gif',
type: 'image/png,image/jpg,image/jpeg,image/gif'
}
四、验证事件
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 = $(".form-login-box").data('jQValidator');
jQValidator.updateStatus('username', 'VALID').validateField('username'); /// 更新所指定的 ' username ' 字段是有效的
3. 对指定的字段进行验证: validateField(field)
$(".form-login-box").data('jQValidator').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. 点击移除动态文本框验证:
<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>
五、插件下载
github : https://github.com/TammyViola/jQValidatorJs