jquery-validate在前端数据校验中的应用以及remote异步调用实践-以若依为例

前言

一、关于Jquery Validate组件

1、validate是什么

2、内置验证方式及触发方式

3、自定义验证规则

二、基本验证实战以及Remote验证

1、基本验证实现

2、remote校验方式

三、总结

前言

随着技术的不断演进，在我们的日常开发过程中，大家一定会遇到很多数据安全的场景。在以往的程序中，我们只要求将数据正常提交到后台即可，对于数据的安全性和准确性，并没有做过多的要求和检验，也因此产生了很多的数据质量问题。比如数据质量有问题，甚至出现一些会导致业务发生异常的例子。不管是传统的单体化架构还是现在的前后端分离架构，数据的校验通常会分为前端和后端处理两个方面。在平时的开发过程中，很多前端的同学会觉得，安全是后端需要考虑的，前端只需要把数据提交给后台即可，那么数据的校验规则由后台来保证。那一些后端的同学则会想，数据的格式校验等操作应该是前言的同学来负责，不经过校验的数据是不允许提交到后台，直接前端就提示给用户，必须按照要求来进行相应参数的设置。

首先根据不同的开发角色，可能关注点不一样。很多小项目或者小企业，做的并不是那么的正规。安全不是任何一方或者一两种角色就能完全搞定的，而是需要多方协同，多管齐下才能看到效果的。稍微正规一点的开发团队，对于这种数据的校验，通常都会做两遍。首先是前端针对用户的输入会做初步的筛查，将不合格的数据进行第一遍过滤。后端同学同样会按照数据规则在做一次，这么做的目的不是为了重复而重复，而是为了安全。因为前端的数据过滤仅仅能防范60%的攻击，比如针对非专业用户，它不会进行接口扫描和请求信息伪造，也不会进行流量模拟。但是对于专业的黑客或者安全人员，他们是完全可以绕过前端的校验，直接请求后端提供的服务，加入在后端没有任何的拦截，那就是我家大门常打开了，显然这是不合理，也是不正常的。

本文主要讲解如何在前端的表单提交时，对表单的数据格式进行验证。博客内容以若依技术框架为例，主要讲解在若依的单体架构前端开发过程中，如何集成jQuery Validate这个组件，首先介绍这个组件的内置校验方式，然后介绍一些常见的表单规则的设置，比如非空、邮件地址、手机电话等常规格式的校验，最后介绍需要异步校验的remote模式，在进行表单提交时，如果有异步remote的请求，如何进行数据的拦截，又会面临什么问题等。希望通过本文，您能掌握jQuery Validate的具体集成使用，同时能进行remote的ajax开发，帮助您构建安全可靠的应用系统。

一、关于Jquery Validate组件

本节首先介绍若依单体架构开发模式中使用得比较多的jQuery Validate组件。通过简单介绍这款组件的基本信息，其提供的内置校验规则，集成原理等让大家对这个组件有一定的了解。

1、validate是什么

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

默认校验规则。

属性	描述
required:true	必须输入的字段
remote:"/action"	使用ajax方法调用action验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用
dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性
number:true	必须输入合法的数字（负数，小数）
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"#field"	输入值必须和 #field 相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）
minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于 5
min:10	输入值不能小于 10
isIp:true	IP地址验证
isPhone:true	手机号码验证
isTel:true	电话号码验证
isName:true	姓名验证
isUserName:true	用户名验证
isIdentity:true	身份证验证
isBirth:true	出生日期验证

2、内置验证方式及触发方式

jquery-validate内置了上面的一些常见验证方式。

required()	Boolean	必填验证元素
required(dependency-expression)	Boolean	必填元素依赖于表达式的结果
required(dependency-callback)	Boolean	必填元素依赖于回调函数的结果
remote(url)	Boolean	请求远程校验。url 通常是一个远程调用方法
minlength(length)	Boolean	设置最小长度
maxlength(length)	Boolean	设置最大长度
rangelength(range)	Boolean	设置一个长度范围 [min,max]
min(value)	Boolean	设置最小值
max(value)	Boolean	设置最大值
email()	Boolean	验证电子邮箱格式
range(range)	Boolean	设置值的范围
url()	Boolean	验证 URL 格式
date()	Boolean	验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）
dateISO()	Boolean	验证 ISO 类型的日期格式
dateDE()	Boolean	验证德式的日期格式（29.04.1994 或 1.1.2006）
number()	Boolean	验证十进制数字（包括小数的）
digits()	Boolean	验证整数
creditcard()	Boolean	验证信用卡号
accept(extension)	Boolean	验证相同后缀名的字符串
equalTo(other)	Boolean	验证两个输入框的内容是否相同
phoneUS()	Boolean	验证美式的电话号码

验证的触发方式修改。

触发方式	类型	默认值	描述
onsubmit	Boolean	true	提交时验证。设置为 false 就用其他方法去验证
onfocusout	Boolean	true	失去焦点时验证（不包括复选框/单选按钮）
onkeyup	Boolean	true	在 keyup 时验证
onclick	Boolean	true	在点击复选框和单选按钮时验证
focusInvalid	Boolean	true	提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点
focusCleanup	Boolean	false	如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用

3、自定义验证规则

虽然验证组件内置了许多默认的验证规则，但是现实当中，我们依然会遇到不满足业务需要的时候，因此校验组件还需要有根据自定义规则来进行扩展的能力。我们来看一下如何在jquery-validate中进行自定义验证规则的扩展。下面以例如加一个区号的验证为例，

1、在jquery.validate.extend.js加入自定义规则

// 地区号码验证
jQuery.validator.addMethod("ac", function (value, element) {
	var ac = /^0\d{2,3}$/;
	return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");

2、然后rules中使用ac: true

rules: {
    areaCode:{
        ac: true,
    },
}

出现如下图表示自定义区号验证成功。

以上就是关于jquery validate组件的相关介绍，包括其主要功能、内置的验证方式、触发方式以及如何自定义验证规则等。这些知识非常重要，通过本节的介绍，大家对jquery-validate有了一定的了解。

二、基本验证实战以及Remote验证

了解和掌握了validate组件的基本知识以后，我们就可以基于这些规则来进行表单的校验。然后来讲解一个远程调用的实战，使用remote来进行城市是否绑定的校验实现。

1、基本验证实现

如果只是表单的基本验证，在若依提供的基本验证框架中有详细的示例，大家感兴趣可以在其提供的官方实例中进行学习。这里结合自己实现的一个国家及首都城市管理的小应用来讲解基本的使用。在这个小例子当中，需要对国家的起止时间和当前城市是否被其它国家绑定来进行限制。而城市信息属于必填的信息，当前国家是否被其它国家绑定则需要配合后台的校验服务来进行验证。先来看表单的定义，html源码如下所示：

<div class="form-group">    
    <label class="col-sm-3 control-label is-required">城市信息：</label>
    <input type="hidden" name="placesId" id="placesId"/>
    <div class="col-sm-8">
         <div class="input-group">
               <input type="text" id="placesInfo" name="placesInfo" class="form-control" readonly="readonly" required> 
                   <span class="input-group-btn">
                   <button type="button" onclick="selectPlaces()" class="btn btn-success"><i class="fa fa-search"></i>
                   </button> 
                   </span>
          </div>
     </div>
</div>

首先在表单定义的时候加上一个required的属性，表示当前的表单的元素是必填的设置。除了在form中定义，还需要使用javascript来创建rule规则，并跟触发机制进行绑定。定义规则的代码如下：

$("#form-capital-add").validate({
      onkeyup: true,
      rules:{
        placesInfo:{
        	remote: {
                url: prefix + "/checkCapitalUnique?t" + new Date() ,
                type: "post",
                dataType: "json",
                data: {
                     "placesId": function() {
                           return $.common.trim($("#placesId").val());
                      },
                      "countryId":[[${countryId  + "" }]]
                  },
                  dataFilter: function(data, type) {
                      return $.validate.unique(data);
                  }
                }
        	}
      },
      messages: {
        	placesInfo: {
                 remote: "该城市已被管理"
           }
      },
      focusCleanup: true
});

最后在提交表单的时候触发表单的校验，提交函数定义如下：

function submitHandler() {
  if ($.validate.form()) {
      $.operate.save(prefix + "/add", $('#form-capital-add').serialize());
  }
}

先来看必填的验证结果，如下图所示：

以上就是基本表单校验的结果展示。讲解完基本表单验证之后，接下来来介绍一下远程验证方式以及可能存在的问题。

2、remote校验方式

如果在校验过程中需要对数据进行后台查询的校验，比如查询用户名是否在后台被别人占用，或者查询手机号码是否被使用了等等。这里的场景是当前的城市是否被别的国家所占用。首先我们来实现后台的校验逻辑。查询是否重复的逻辑如下所示，实际业务中大家可以根据自己的场景进行修改。

@Override
public String checkCapitalUnique(CountryCapital capital) {
	Long countryId = StringUtils.isNull(capital.getCountryId()) ? -1L : capital.getCountryId();
	QueryWrapper<CountryCapital> queryWrapper = new QueryWrapper<CountryCapital>();
	queryWrapper.eq("places_id", capital.getPlacesId());
	CountryCapital info = this.baseMapper.selectOne(queryWrapper);
    if (StringUtils.isNotNull(info) && info.getCountryId().longValue() != countryId.longValue())
    {
        return CapitalConstants.CAPITAL_NOT_UNIQUE;
    }
    return CapitalConstants.CAPITAL_UNIQUE;
}

是否加上以上的功能就可以实现是否占用的校验呢？如果按照这种功能方式实现，你会发现，当我们出现了重复的时候，表单虽然有了校验，但是表单依然进行了提交。如下图所示：

如果发生这种情况，肯定是不满足业务需要的，因此要求我们进行一定的限制，同时表单不能提交。那应该怎么做呢？这里不卖关子，直接给出实现方案，在验证的方法中需要将remote方法中的异步开关关掉，改为同步的方式。代码如下图所示：

remote: {
   url: prefix + "/checkCapitalUnique?t" + new Date() ,
   type: "post",
   dataType: "json",
   async:false,//必须要开启同步模式，否则还是会提交表单
   data: {
        "placesId": function() {
               return $.common.trim($("#placesId").val());
         },
         "countryId":[[${countryId  + "" }]]
   },
   dataFilter: function(data, type) {
         return $.validate.unique(data);
  }
}

更改以上的异步开关后，我们来看一下最后的实现效果，如下图所示：

再次点击确定按钮，你会发现校验信息已经成功加上，同时校验不通过的话，表单不会提交，这样就达到了我们的需求。

三、总结

以上就是本文的主要内容，本文主要讲解如何在前端的表单提交时，对表单的数据格式进行验证。博客内容以若依技术框架为例，主要讲解在若依的单体架构前端开发过程中，如何集成jQuery Validate这个组件，首先介绍这个组件的内置校验方式，然后介绍一些常见的表单规则的设置，比如非空、邮件地址、手机电话等常规格式的校验，最后介绍需要异步校验的remote模式，在进行表单提交时，如果有异步remote的请求，如何进行数据的拦截，又会面临什么问题等。希望通过本文，您能掌握jQuery Validate的具体集成使用，同时能进行remote的ajax开发，帮助您构建安全可靠的应用系统。行文仓促，定有许多不足之处，如有不足还恳请各位专家朋友在评论区不吝指出，不胜感激。