合肥哪里有做网站的,广告型网站怎么做的,网站建设的英语,欧美网站设计目录 前言
一、关于Jquery Validate组件
1、validate是什么
2、内置验证方式及触发方式 3、自定义验证规则
二、基本验证实战以及Remote验证
1、基本验证实现
2、remote校验方式
三、总结 前言 随着技术的不断演进#xff0c;在我们的日常开发过程中#xff0c;大家一…目录 前言
一、关于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-231998/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.2006number()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加入自定义规则
// 地区号码验证
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 classform-group label classcol-sm-3 control-label is-required城市信息/labelinput typehidden nameplacesId idplacesId/div classcol-sm-8div classinput-groupinput typetext idplacesInfo nameplacesInfo classform-control readonlyreadonly required span classinput-group-btnbutton typebutton onclickselectPlaces() classbtn btn-successi classfa 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();QueryWrapperCountryCapital queryWrapper new QueryWrapperCountryCapital();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开发帮助您构建安全可靠的应用系统。行文仓促定有许多不足之处如有不足还恳请各位专家朋友在评论区不吝指出不胜感激。
