您现在的位置是:首页 > 技术人生 > 前端技术前端技术

jQuery表单验证插件Validate

高晓波2017-12-02【前端技术】人已围观

简介现在做的项目说起来应该算我的处女项目。首次处理复杂表单,参数封装已经让我有点措手不及,参数的合法性验证更是让人头疼。
之前简单表单参数校验都是徒手写js,简单表单验证尚可,复杂表单的验证可能是要另辟蹊径了。
网上一搜,表单验证插件琳琅满目,要不怎么说咱们现在都是站在巨人的肩膀上开发。

一、问题场景

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

之前简单表单参数校验都是徒手写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用法是不是挺简单、挺方便的?

Tags:js插件   JQuery

很赞哦! ()

文章评论