前端js表单验证插件JQuery Validate使用

转自：jQuery表单验证插件Validate

 

一、问题场景

现在做的项目说起来应该算我的处女项目。首次处理复杂表单，参数封装已经让我有点措手不及，参数的合法性验证更是让人头疼。

之前简单表单参数校验都是徒手写js，简单表单验证尚可，复杂表单的验证可能是要另辟蹊径了。

网上一搜，表单验证插件琳琅满目，要不怎么说咱们现在都是站在巨人的肩膀上开发。

 

今天要介绍的是jQuery的validate插件。Validate给我的使用感受是：使用简单粗暴，规则内置丰富，随心所欲易于扩展。

 

二、 快速开始

扯了那么多，动手试试吧！

Validate插件官网

1、引入jQuery和Validate，本项目中jQuery版本为v1.12.4，validate版本为v1.17.0

<script type="text/javascript" src="${resourceRootPath}/static/frame/jquery/dist/jquery.min.js"></script>
<script stype="text/javascript" src="${resourceRootPath}/static/frame/jquery-validation/dist/jquery.validate.js"></script>

 

2、使用前热身

• 表单验证核心无非以下两点：

规则Rule：
validate内置默认规则：

序号	规则	描述
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。

提示信息message

validate内置默认提示消息：

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

validate默认提示位置是为表单元素后面：

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

 

其他一些参数：

	//忽略的元素	
    ignore: ":hidden",
    doNotHideMessage: true, // this option enables to show the error/success messages on tab switch.
	//错误消息容器
    errorElement: 'span', // default input error message container
    //错误消息class
	errorClass: 'help-block help-block-error', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    //错误消息高亮显示
	highlight: function highlightCbFunc(element) { // hightlight error inputs
      $(element)
        .closest('.form-group')
        .removeClass('has-success')
        .addClass('has-error');
      // set error class to the control group
    },
	//输入合法内容后取消高亮显示
    unhighlight: function unhighlightCbFunc(element) { // revert the change done by hightlight
      $(element)
        .closest('.form-group')
        .removeClass('has-error'); // set error class to the control group
    },

	//失去焦点事件
    onfocusout: function(element) {
      $(element).valid();
    },

	//按键弹起事件
    onkeyup: function(element) {
      var currentValue = $(element).val();
      if (!$(element).valid()){
        $(element).val(currentValue.substr(0,currentValue.length-1));
      }
    }

 

3、简单使用

了解上面三要素和一些参数后我们就可以开始简单使用了（其实甚至可以只知道一些默认的规则就可以拿来使用了）。

项目中提交表单多为ajax提交，用法如下：


将校验规则写到控件中：

<form id="baseInfoForm">
	<div class="form-group">
	    <label class="control-label col-md-5">账户名（必填）</label>
	    <div class="col-md-7">
	        <select class="form-control input-sm select-remote" data-selectconf="account" name="account" required>
	            <option value=""></option>
	        </select>
	    </div>
	</div>
	<div class="form-group">
	    <label class="control-label col-md-5">计划名称（必填）</label>
	    <div class="col-md-7">
	        <input type="text" class="form-control-static" name="rateplanName" required />
	    </div>
	</div>
	<div class="form-group">
	    <label class="control-label col-md-5">E-mail（必填）</label>
	    <div class="col-md-7">
	        <input type="email" class="form-control-static" name="email" required />
	    </div>
	</div>
	<div class="form-group">
	    <label class="control-label col-md-5">账户费用：</label>
	    <div class="col-mc-7">
	        <input id="account_charge" type="number" name="ACCOUNT_CHARGE" min="0" step="0.01"/>
	    </div>
	</div>
</form>

 

提交前验证：

$('#baseInfoForm').valid();//通过验证返回true，不通过返回false

 

三、扩展

场景：业务中某个表单元素只允许填IP地址或者域名，默认规则里面没有怎么办？没关系，validate具有非常良好的扩展性。

示例表单：

<form id="exampleForm">
	<div class="form-group">
	    <label class="control-label col-md-5">IP地址范围(必填)</label>
	    <div class="col-md-7">
	        <input id="account_charge" type="text" name="ipRange" required />
	    </div>
	</div>
</form>

 

1、首先添加方法（method）

  jQuery.validator.addMethod("ipValidate", function (value, element) {
    var ipReg = /((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))/;
    var domainReg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
    return this.optional(element) || (ipReg.test(value) || (domainReg.test(value));
  }, '请输入ip或者域名');

2、添加规则(rule)

rules : {
    ipRange : {//ip地址范围
    ipValidate:'请输入ip或者域名'
}

3、添加消息 其实我们在上面定义方法和规则都已经定义了提示消息，此步骤可选。

 messages: {
      ipRange:"请输入IP地址或者域名"
  }

4、将上述扩展内容写入 jquery.validate.js或者自定一个js文件validate.extend.js,建议后者

  //变量myValidateOpts包含了自定义的一些属性
  var validateOpts = $.extend(true, {}, myValidateOpts, {});
  //初始化
  $('#exampleForm').validate(validateOpts);
  //验证
  $('#exampleForm').valid();

jQuery表单验证插件Validate用法是不是挺简单、挺方便的？