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输入值不能大于 5min:10输入值不能小于 10isIp:trueIP所在验证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	验证美式的电话号码

        验证的触发方式修改。
触发方式类型默认值描述onsubmitBooleantrue提交时验证。设置为 false 就用其他方法去验证onfocusoutBooleantrue失去焦点时验证（不包括复选框/单选按钮）onkeyupBooleantrue在 keyup 时验证onclickBooleantrue在点击复选框和单选按钮时验证focusInvalidBooleantrue提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点focusCleanupBooleanfalse假如是 true 那么当未通过验证的元素获得焦点时，移除错误提示。克制和 focusInvalid 一起用

3、自定义验证规则 

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

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

复制代码

2、然后rules中利用ac: true

1. rules: {
2.     areaCode:{
3.         ac: true,
4.     },
5. }

复制代码

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

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

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

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

1. <div class="form-group">   
2.     <label class="col-sm-3 control-label is-required">城市信息：</label>
3.     <input type="hidden" name="placesId" id="placesId"/>
4.     <div class="col-sm-8">
5.          <div class="input-group">
6.                <input type="text" id="placesInfo" name="placesInfo" class="form-control" readonly="readonly" required>
7.                    <span class="input-group-btn">
8.                    <button type="button" onclick="selectPlaces()" class="btn btn-success"><i class="fa fa-search"></i>
9.                    </button>
10.                    </span>
11.           </div>
12.      </div>
13. </div>

复制代码

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

1. $("#form-capital-add").validate({
2.       onkeyup: true,
3.       rules:{
4.         placesInfo:{
5.                 remote: {
6.                 url: prefix + "/checkCapitalUnique?t" + new Date() ,
7.                 type: "post",
8.                 dataType: "json",
9.                 data: {
10.                      "placesId": function() {
11.                            return $.common.trim($("#placesId").val());
12.                       },
13.                       "countryId":[[${countryId  + "" }]]
14.                   },
15.                   dataFilter: function(data, type) {
16.                       return $.validate.unique(data);
17.                   }
18.                 }
19.                 }
20.       },
21.       messages: {
22.                 placesInfo: {
23.                  remote: "该城市已被管理"
24.            }
25.       },
26.       focusCleanup: true
27. });

复制代码

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

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

复制代码

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

        以上就是基本表单校验的效果展示。讲解完基本表单验证之后，接下来来介绍一下远程验证方式以及大概存在的题目。
2、remote校验方式

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

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

复制代码

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

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

1. remote: {
2.    url: prefix + "/checkCapitalUnique?t" + new Date() ,
3.    type: "post",
4.    dataType: "json",
5.    async:false,//必须要开启同步模式，否则还是会提交表单
6.    data: {
7.         "placesId": function() {
8.                return $.common.trim($("#placesId").val());
9.          },
10.          "countryId":[[${countryId  + "" }]]
11.    },
12.    dataFilter: function(data, type) {
13.          return $.validate.unique(data);
14.   }
15. }

复制代码

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

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。