jQValidator API文档

2024-03-21 17:00:58

简介：该插件是基于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 ” 里保留结构即可；
(2) class = “ form-group-cell ” 可以更改为 “ form-group-bd ” ，只限这两种。

3.编写css样式

可以根据设计稿的情况，在jQValidator.css直接修改相关样式或在自己的样式表中书写新的样式覆盖。

4.调取插件

<script type="text/javascript">
$(".global-form-box").jQValidator();
</script>

二、参数说明（具体可参考bootstrapValidator的参数设定）

三、验证规则

notEmpty：控件不能为空，必填项；

notEmpty: true

stringLength：该控件字符个数， min为最小字符数，max为最大字符数；

stringLength: {
	min: 4,
　	max: 8
}

identical：该控件必须与某控件的值相同

identical: {
	field: 'password',
    message: '两次密码不一致'
}

different : 该控件必须与某控件的值不同

different: {  
	field: 'account',//需要进行比较的input name值
    message: '不能和账号相同'
}

phone：电话验证规则，‘MB’—移动电话，‘LD’—座机固定电话，’ ALL ’ —— 移动电话或座机电话

phone: {
	phoneType: 'LD'  
}

idCard：身份证验证规则，18位验证

idCard: true

emailAddress：邮箱验证规则

emailAddress: true

regexp：自定义验证的正则表达式

regexp: {
	regexp: /^1[34578]\d{9}$/,
　　message: '请填写正确的联系电话'
}

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();
   　　}
   */
}

file：附件上传类型验证。文件类型参考网址：https://blog.csdn.net/zhuyangru/article/details/70254789

file: {
	extension: 'png,jpg,jpeg,gif',
	type: 'image/png,image/jpg,image/jpeg,image/gif'
}

birthDate : 生日日期与身份证号码进行对比校验，（v2.7+）

birthDate: {
	idCardName: 'idNumber'   // 身份证的name值
}

gender : 性别与身份证号码进行对比校验，规定 input[type=‘radio’] 的 val 值女性的为0，男性则为1 ，（v2.7+）

gender: {
	idCardName: 'idNumber'   // 身份证的name值
}

bankCard：银行卡校验，限制数字，字符长度16-19，（v2.7+）

bankCard: true

QQNumber：QQ号码校验，限制数字，字符长度15位以内，（v2.7+）

QQNumber: true

四、验证事件

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>

五、插件下载

github : https://github.com/TammyViola/jQValidatorJs

码农公寓