Validate-Demo

表单验证Validate

Validate组件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

PS: input type=[checkbox,radio]时同组别内name必须相同，其他情况或元素下所有name必唯一。
不验证的元素包括:hidden, :submit, :reset, :image, :disabled;
如果需要验证有可能被用户操作隐藏的元素，需初始化时修改配置ignore,默认值：':hidden',或者阻止用户隐藏，或触发隐藏操作时，校验将要隐藏的元素是否验证通过；从行为上控制；

官网地址：https://jqueryvalidation.org

中文教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

github：https://github.com/jquery-validation/jquery-validation/tree/master

常用组件包

基础包（必须）

jquery.js

bootstrap.min.js

组件包

jquery.validate.min.js

(废弃)jquery-validate.bootstrap-tooltip.min.js

默认验证规则

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

常用方法

1. 重置表单：validator.resetForm();(暂时无效)

2. 验证 form 返回成功还是失败（Boolean）：validator.form () 或 $(表单选择器).valid();（不支持远程异步验证）

3. 验证单个元素是成功还是失败（Boolean）：validator.element(表单元素选择器);（不支持远程异步验证）

注：默认对hidden无效，建议对必须的hidden元素进行自行验证，并提示error。

4. 返回无效字段的数量: Validator.numberOfInvalids()

5. 通过验证后运行的函数：submitHandler

注：里面要加上表单提交的函数，否则表单：不会提交。

$(".selector").validate({
    submitHandler:function(form) {
        //ajax提交表单或 form.submit();
        //$(form).ajaxSubmit(); 需加载jquery-form.js
        
        var ajaxData = COM_TOOLS.serializeObject(form);
        //修改提交到服务器的数据 
        // ajaxData.param1 = 'value';
        // ajaxData.param2 = ajaxData.param1+1;
        //例1
        COM_TOOLS.ajaxFn({ 
            type : "post",
            url : "/yourUrl",
            data : ajaxData,
            success : function(data,status){
                parent.COM_TOOLS.alert("操作成功");
            },
            error : function(){
                COM_TOOLS.alert("系统异常");
            }
        }, 1); // 1:全屏loading遮罩；2:button loading遮罩;
        
        //等同于 例2
        COM_TOOLS.loadingShade.open(); //防重复提交锁-打开
        $.ajax({
            type : "post",
            url : "/yourUrl",
            data : ajaxData,
            success : function(data,status){
                parent.COM_TOOLS.alert("操作成功");
            },
            error : function(){
                COM_TOOLS.alert("系统异常");
            },
            complete: function(XHR, textStatus) {
                COM_TOOLS.loadingShade.close(); //防重复提交锁-关闭
            }
        });
    }
});

6. 为指定元素添加校验规则：PS:必须使用单一元素选择器，或each遍历; 必须在$( "form" ).validate() 后面使用rules()

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: { //可选
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});
// 或者
$('.selector').each(function(){
	$(this).rules( "add", {required: true});
});

7. 动态删除校验规则(只适用于通过js配置的规则信息)：$( "#myinput" ).rules( "remove", "min max" ); PS: 建议同时使用 validator.element(表单元素选择器，例如："#myinput");方法（或 $(表单选择器).valid();），以刷新当前元素校验状态；如何删除了元素上的所有校验器，则需要额外调用 $(表单元素选择器，例如："#myinput").tooltip('destroy');方法；

8. 动态删除校验规则(只适用于属性校验器)：$( "#myinput" ).removeAttr('required').tooltip('destroy');

9. 新增解析器：针对规则中"ck-cus-"开头的，且其属性值为数组形字符串的，转化成数组对象

// 下方示例中的ck-number-len 是 ck-cus-* 系列中的特殊处理；
<input class="form-control input-sm" name="name" value="" ck-number-len="[2,12]" type="text">
// 输出：数字格式错误(最多只能输入12位整数及最多2位小数

// 规则源码：
$.validator.addMethod("ck-number-len", function(value, element, params) {
    return this.optional(element) || !check_input_num2(value, params);
},'数字格式错误(最多只能输入{1}位整数及最多{0}位小数');

实例演示

通过属性方式设置验证规则（推荐）

只输入整数：

整数范围[5-10]：

只输入数字（含小数，支持千分位）：

只输入字母：

只输入汉字：

必须同时包含数字和字母：

邮箱验证：

手机验证（1开头的11位数字|09开头的10位数字）：

身份验证（中国大陆）：

邮编验证（6位非全0整数）：

数字（0-9）或字母：

数字（0-9）、下划线或字母：

正数+0：

[A-Za-z0-9\-_]：

特殊字符：

手机及电话号验证，支持台湾号码

工具：输入17位数字生成最后一位;注意：必须遵循如下格式（年月日必须是合法格式），前6位（省市县区号）+年（4位）月（2位）日（2位）+2位数字+1位数字（男单数，女双数）+数字验证位（自动生成）【可根据身份证号码提取日期及性别的操作】

输出:

<form class="form-horizontal form-label-sm" id="upForm5" autocomplete="off">
    <div class="form-group">
        <label class="col-sm-3 control-label">只输入整数：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="zhengshu" required digits="true"/>
        </div>
        <label class="col-sm-3 control-label">整数范围[5-10]：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="zsfanwei" required range="[5,10]"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">只输入数字（含小数，支持千分位）：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="hxiaoshu" required number="true"/>
        </div>
        <label class="col-sm-3 control-label">只输入字母：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="zimu" required ck-letter="true"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">只输入汉字：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="hanzi" required ck-chinese="true"/>
        </div>
        <label class="col-sm-3 control-label">必须同时包含数字和字母：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="shuzhizm" required ck-numandletter="true"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">邮箱验证：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="youxiang" required ck-email="true"/>
        </div>
        <label class="col-sm-3 control-label">手机验证（1开头的11位数字|09开头的10位数字）：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="shouji" required ck-phone="true"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">身份验证（中国大陆）：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="shenfen" required ck-idcard="true"/>
        </div>
        <label class="col-sm-3 control-label">邮编验证（6位非全0整数）：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="youbian" required ck-zipcode="true"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">数字（0-9）或字母：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="numorletter" required ck-numorletter="true"/>
        </div>
        <label class="col-sm-3 control-label">数字（0-9）、下划线或字母：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="numorletteroruline" required ck-numorletteroruline="true"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">正数+0：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="non-negative" required ck-non-negative="true"/>
        </div>
        <label class="col-sm-3 control-label">[A-Za-z0-9\-_]：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="ck-i18n-key" required ck-i18n-key="true"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">特殊字符：</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="specialchars" required cus-specialchars="true"/>
        </div>
        <label class="col-sm-3 control-label">手机及电话号验证，支持台湾号码</label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="phone-tel" required ck-phone-tel="true"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-4">
            <button type="button" class="btn btn-success btn-sm" id="butSub5">提交</button>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-9 control-label">
            <span class="text-danger">工具：</span>
            <span class="text-warning">输入17位数字生成最后一位;注意：必须遵循如下格式（年月日必须是合法格式），前6位（省市县区号）+年（4位）月（2位）日（2位）+2位数字+1位数字（男单数，女双数）+数字验证位（自动生成）【可根据身份证号码提取日期及性别的操作】</span>
        </label>
        <div class="col-sm-3">
            <input type="text" class="form-control input-sm" name="aaa" id="demo1-input5_1" maxlength="17"/>
            <button type="button" class="btn btn-success btn-sm" id="butSub5_1">提交</button>
            <span>输出:</span>
            <input type="text" class="form-control input-sm" name="ddd" id="demo1-input5_2"/>
        </div>
    </div>
</form>

//组件包引用规则 同上

//DEMO5
$('#upForm5').validate();
$('#butSub5').click(function(){
    if(!$('#upForm5').validate().form()){
        return false;
    }
});

基础：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>   

datetimepiker样式:
<link rel="stylesheet" type="text/css" href="../css/plugins/datetimepicker/bootstrap-datetimepicker.min.css"/>

自定义验证规则（利用默认规则进行组合，以及提示信息修改）

<form class="form-horizontal" id="upForm2">
	<div class="form-group">
		<label class="col-sm-2 control-label">用户名：</label>
		<div class="col-sm-4"><input class="form-control input-sm" name="uname" type="text"/></div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">密码：</label>
		<div class="col-sm-4"><input class="form-control input-sm" id="upwd" name="upwd" type="text"/></div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">确认密码：</label>
		<div class="col-sm-4"><input class="form-control input-sm" name="upwd2" type="text"/></div>
	</div>
	<div class="form-group">
        <label class="col-sm-2 control-label">性别：</label>
        <div class="col-sm-4">
            <label class="checkbox-inline i-checks">
              <input type="radio" name="sex" value="option1" checked required> 男
            </label>
            <label class="checkbox-inline i-checks">
              <input type="radio" name="sex" value="option2" required> 女
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">爱好(多选)：</label>
        <div class="col-sm-4">
            <label class="radio-inline i-checks">
              <input type="checkbox" name="favor[]" value="option1"> 运动
            </label>
            <label class="radio-inline i-checks">
              <input type="checkbox" name="favor[]" value="option2"> 音乐
            </label>
            <label class="radio-inline i-checks">
              <input type="checkbox" name="favor[]" value="option2"> 电影
            </label>
        </div>
    </div>
	<div class="form-group">
  	<div class="col-sm-offset-2 col-sm-4">
	  	<button type="button" class="btn btn-success btn-sm" id="butSub2">提交</button>
  	</div>
  </div>
</form>

//iCheck组件
<script src="../js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
//组件包引用规则 同上

//DEMO2
$('.i-checks').iCheck({ //如果使用了iCheck需要这段JS
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChanged', function(){  //如果使用了validate验证需要用一下代码
      $(this).closest('form').validate().element(this);
});

$('#upForm2').validate({
	rules:{
		uname:{
			required:true,	//使用组合的方式进行多项验证
			minlength:6
		},
		upwd:{
			required:true,
			rangelength:[6,12]
		},
		upwd2:{
			required:true,
			rangelength:[6,12],
			equalTo: "#upwd"
		},
		"favor[]":{	//多选checkbox使用数组的形式
			required:true,
			minlength:2
		}
	},
	messages:{
		uname:{
			required:"请输入您的用户名",
			minlength:"不能少于6位"
		},
		upwd:{
			required:"请输入密码",
			rangelength:"密码长度为6~12位"
		},
		upwd2:{
			required:"请再次输入密码",
			rangelength:"密码长度为6~12位",
			equalTo: "两次密码输入不一致"
		},
		"favor[]":{
			required:"请选择您的爱好",
			minlength:"至少选着两个爱好"
		}
	}
});
$('#butSub2').click(function(){
	if(!$('#upForm2').validate().form()){
		return false;
	}
});

基础：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
iCheck-css
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">

自定义验证组件（利用扩展编写私有的校验规则）

<form class="form-horizontal" id="upForm3">
	<div class="form-group">
		<label class="col-sm-2 control-label">电话：</label>
		<div class="col-sm-4">
			<input class="form-control input-sm" type="text" name="uphone"/>
		</div>
	</div>
	<div class="form-group form-inline">
		<label class="col-sm-2 control-label">日期比较：</label>
		<div class="input-group input-group-sm date" id="startime_div">
            <input type="text" name="startime" id="startime" class="form-control input-sm" readonly>                   
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        &nbsp;&nbsp;
        <div class="input-group input-group-sm date" id="endtime_div">
            <input class="form-control input-sm" type="text" id="endtime" name="endtime" readonly/>
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
	</div>
	<div class="form-group">
  	<div class="col-sm-offset-2 col-sm-4">
	  	<button type="button" class="btn btn-success btn-sm" id="butSub3">提交</button>
  	</div>
  </div>
</form>

//组件包引用规则 同上

datetimepiker:
<script src="../js/plugins/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>

//DEMO3
$('#upForm3').validate({
	rules:{
		uphone:{
			"ck-phone":true,	//boolean false不校验
		},
		startime:{
			required:true,
			date:true
		},
		endtime:{
			required:true,
			date:true,
		}
	},
	messages:{
		uphone:{	//可以覆盖添加的默认错误信息
			"ck-phone":"手机号格式错误"
		},
	}
});

//这个id为input外层的div的id
$('#startime_div').datetimepicker().on('changeDate', function(){
    var t_ = $(this).is('input') ? $(this) : $(this).children('input');
    $('#endtime_div').datetimepicker('setStartDate', t_.val());
});
$('#endtime_div').datetimepicker().on('changeDate', function(){
    var t_ = $(this).is('input') ? $(this) : $(this).children('input');
    $('#startime_div').datetimepicker('setEndDate', t_.val());
});

$('#butSub3').click(function(){
	if(!$('#upForm3').validate().form()){
		return false;
	}
});

基础：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>	

datetimepiker样式:
<link rel="stylesheet" type="text/css" href="../css/plugins/datetimepicker/bootstrap-datetimepicker.min.css"/>

远程验证（远程实时校验）

<form class="form-horizontal" id="upForm4">
	<div class="form-group">
		<label class="col-sm-2 control-label">旧密码验证：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm" id="pwd" name="pwd"/>
		</div>
	</div>
	<div class="form-group">
  	<div class="col-sm-offset-2 col-sm-4">
	  	<button type="button" class="btn btn-success btn-sm" id="butSub4">提交</button>
  	</div>
  </div>
</form>

//组件包引用规则 同上

//DEMO4
$('#upForm4').validate({
	rules: {
		pwd: {
			required: true,
			remote: {
				//param: {
				url: "/api", //后台处理程序
				type: "get", //数据发送方式
				//dataType: "json", //接受数据格式   
				//async : false,		//同步请求，默认true（建议使用 true，并结合使用submitHandler回调方法提交表单）
				/* PS：如使用validator.form() && form.submit()方式验证提交表单，请改成同步 */
				data: { //要传递的数据
					pwd: function() {
						return $("#pwd").val();
					}
				},
				dataFilter: function(d) {　　　　 //判断控制器返回的内容
					if(d == "true") {
						return true;
					} else {
						return false;
					}
				}
				//},
				//depends:function(){return true;} //结合param 使用，返回 true 则不发送ajax 请求
			}
		}
	},
	messages: {
		pwd: {
			required: "请输入您的旧密码",
			remote: "原始密码不正确,请重新填写！"
		}
	},
	submitHandler: function(form) {
		//AJAX
		/*$.ajax({
			url:"_URL_",
			type:"get",
			data:$(form).serialize(),
			success:function(d){
				//TODO
			}
		})*/
	}
});
$('#butSub4').click(function(){
	$('#upForm4').submit();
});

基础：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

新增自定义校验-表单内至少N项被填写

//注：此处表单元素添加.js-require类是为了校验时所用；
//.js-require类的名称可自行定义；
<form class="form-horizontal" id="upForm6">
	<div class="form-group">
		<label class="col-sm-2 control-label">字段1：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name1"/>
		</div>
		<label class="col-sm-2 control-label">字段2：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name2"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">字段3：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name3"/>
		</div>
		<label class="col-sm-2 control-label">字段4：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name4"/>
		</div>
	</div>
	<div class="form-group">
    	<div class="col-sm-offset-2 col-sm-4">
		  	<button type="button" class="btn btn-success btn-sm" id="butSub6">提交</button>
    	</div>
	</div>
</form>

//组件包引用规则 同上

//DEMO6

/* 注：[2,".js-require"]
 * options[0]: 组中至少填写的字段数
 * options[1]: 与自定义名称相对应的CSS选择器，用于定义有条件的字段组 *
 * 此次添加的自定义校验 不支持 在DOM元素内直接填写，如:required="true"*
 */
$('#upForm6').validate({
	rules:{
		name1:{require_from_group: [2,".js-require"]},
		name2:{require_from_group: [2,".js-require"]},
		name3:{require_from_group: [2,".js-require"]},
		name4:{require_from_group: [2,".js-require"]}
	}/*,
	messages:{ //可选
		name1:{require_from_group:"请至少填写{0}项"},
		name2:{require_from_group:"请至少填写{0}项"},
		name3:{require_from_group:"请至少填写{0}项"},
		name4:{require_from_group:"请至少填写{0}项"}
	}*/
});
$('#butSub6').click(function(){
	if(!$('#upForm6').validate().form()){
		return false;
	}
});

基础：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

新增自定义校验-表单内至少N项被填写或者都不填写

//注：此处表单元素添加.js-require类是为了校验时所用；
//.js-require类的名称可自行定义；
<form class="form-horizontal" id="upForm7">
	<div class="form-group">
		<label class="col-sm-2 control-label">字段1：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name1"/>
		</div>
		<label class="col-sm-2 control-label">字段2：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name2"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">字段3：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name3"/>
		</div>
		<label class="col-sm-2 control-label">字段4：</label>
		<div class="col-sm-4">
			<input type="text" class="form-control input-sm js-require" name="name4"/>
		</div>
	</div>
	<div class="form-group">
    	<div class="col-sm-offset-2 col-sm-4">
		  	<button type="button" class="btn btn-success btn-sm" id="butSub7">提交</button>
    	</div>
	</div>
</form>

//组件包引用规则 同上

//DEMO7

/* 注：[2,".js-require"]
 * options[0]: 组中至少填写的字段数
 * options[1]: 与自定义名称相对应的CSS选择器，用于定义有条件的字段组 *
 * 此次添加的自定义校验 不支持 在DOM元素内直接填写，如:required="true"*
 */
$('#upForm7').validate({
	rules:{
		name1:{skip_or_fill_minimum: [3,".js-require"]},
		name2:{skip_or_fill_minimum: [3,".js-require"]},
		name3:{skip_or_fill_minimum: [3,".js-require"]},
		name4:{skip_or_fill_minimum: [3,".js-require"]}
	}/*,
	messages:{ //可选
		name1:{skip_or_fill_minimum:"请至少填写{0}项或不填写"},
		name2:{skip_or_fill_minimum:"请至少填写{0}项或不填写"},
		name3:{skip_or_fill_minimum:"请至少填写{0}项或不填写"},
		name4:{skip_or_fill_minimum:"请至少填写{0}项或不填写"}
	} */
});
$('#butSub7').click(function(){
	console.log(1);
	if(!$('#upForm7').validate().form()){
		return false;
	}
});

基础：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>