`
sd8089730
  • 浏览: 258745 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
社区版块
存档分类
最新评论

Validator框架JS检验功能

阅读更多

在之前的校验案例中我们使用了validator框架中的”required、minLength、maxLength”这几种校验规则,对于这些规则我们知道都配置在validator-rules.xml文件中了,纵观里面的规则,我们可发现还有很多其它的校验规则,其中“mask”可以校验正则表达式,“date”可校验日期格式,“email”可校验邮件的格式,可见这框架的强大之处,我们使用”date”和”email”分别来校验表单中的日期和邮件输入的格式,首先在表单中增加两个这样的输入域,然后在userForm中对应的增加字段,然后在校验文件中增加如下两个字段的校验:

            <field property="email"

                    depends="email">

                <arg   key="prompt.email"/>

            </field>           

 

            <field property="birthday"

                    depends="date">

                <arg   key="prompt.date"/>

                <var>

                    <var-name>datePattern</var-name>

                    <var-value>yyyy-MM-dd</var-value>

                </var>               

            </field>

校验邮件格式跟之前的几个校验没啥区别,但是日期格式的校验时我们得设置日期匹配的类型变量,这样就能达到日期和邮件的校验了,对于这种自身的校验之外,还有一种校验,如确认密码和密码是否是相同的这样的校验则不是单纯校验本身了,而是跟别的进行一个对比,这时另一种校验规则出现了,“validwhen”,它是专门来校验像这种复杂类型的校验规则,所以我们在表单中再添加一个文本域叫password2,然后在formbean中添加相应的字段,最后我们在校验文件中进行配置,用这种校验时得注意,因为它的消息KEY和”required”校验器的是一样的,都是“errors.required”,所以这时我们同时用上这两个校验规则,从中来说明一个问题,这个字段的校验如下:

             <field property="password2"

                    depends="required,validwhen">

                    <msg key="errors.password2" name="validwhen"/>

                <arg   key="prompt.password2"/>

                <var>

                    <var-name>test</var-name>

                    <var-value>(*this* == password)</var-value>

                </var>

            </field>

在使用“validwhen”校验器进行校验时我们得设置test变量,在使用这个校验器时我们还面临一个问题,之前也说过了,它的消息KEY跟”required”是一样的,当对一个字段进行校验时这两个校验规则并存时就应该采取相应的措施来避免冲突的产生,我们让required还保持默认,所以我们用arg来进行参数的配置,而validwhen则不能采用默认了,我们应该改变它的消息KEY,这时我们可用msg标签来进行替换,name指的是哪个校验器发生时,key则表示会用指定的消息KEY,这是使用这个校验器的一个需要注意的问题。

可能在实际中我们会遇到如下情况:如果两个Action关联的是同一个ActionForm,但它们的校检规则可能不一样,在ActionForm中该如何编写validate方法?例如,增加用户和修改用户时可使用同一个ActionForm,但是修改用户不需要校验密码:

<form name=”userForm” type=”….”/>

<action path=”/addUser” name=”userForm” type=”…..”/>

<action path=”/editUser” name=”userForm” type=”….”/>

像这样的需求我们怎么来实现呢?ValidatorActionForm就是用来解决这样的问题的,我们让我们的Formbean来继承它而代替ValidatorForm,然后对于这两个Action有不同的校验规则,所以我们得在validation.xml中配置两套校验规则,而校验规则的命名是以action的path路径为名,这样对于每个Action请求就会根据请求名称来到validator.xml中找到不同的校验规则,重要原因还是ValidatorActionForm这个类起的作用,原来我们用ValidatorForm时是根据Action所关联的Fomrbean的名称来进行校验规则匹配的,而这个类则是根据Action的path路径来找相应的校验规则的,所以这样就解决了这种需求了,validator.xml中的模拟写法就如下:

<form-validation>

 

    <formset>

       <form name="/editUser">

            <field property="name"

                    depends="required">

                <arg   key="prompt.username"/>

            </field>

            ...        

       </form>

       <form name="/addUser">

            <field property="name"

                    depends="required">

                <arg   key="prompt.username"/>

            </field>

            ...     

       </form>

</formset>

在学struts的时候我们知道还有一种动态ActionForm,那如果是这种情况下用validator框架来对进行校验又该如何做呢?struts又提供了一个类专门来解决这样的问题的,叫“DynaValidatorForm”,我们在struts-config.xml中把动态ActionForm配成如下:

       <form-bean name="userForm" type="org.apache.struts.validator.DynaValidatorForm">

           <form-property name="name" type="java.lang.String"/>

           <form-property name="password" type="java.lang.String"/>

       </form-bean>

 

这时我们在validation.xml针对这个formbean配置一套校验规则既可实现校验,其实跟自己手动编写的formbean一样,对于多个Action引用同一个动态formbean但其校验规则不同的情况,我们将动态formbean配成DynaValidatorActionForm,既可完成这样的需求,原理跟ValidatorActionForm一样。

此对对于用JavaScript校验功能用这个校验框架也能办到,而不用我们自己在客户端进行代码编写,要用使用Validator的JavaScript校验功能,要在JSP页面中使用struts的<html:javascript formName=”xxx”>标签,其中的xxx是某个校验域的名称,对于我们这个例子则是userForm,然后在需要验证的表单的onsubmit属性中调用“return validateXxx()”方法,其中validateXxx方法可能通过<html:javascript>的method属性来改变,默认是配置的formName的名称,于是我们在用户注册JSP中加入如下语句来生成Javascript校验代码:

<html:javascript formName="userForm"/>

这时我们访问此页面,然后查看其源代码就会发现生成validateUserForm()的校验方法:

传智播客Struts(张老师)之Validator框架JS检验功能

 

假如我们想改变生成的方法名称,可用method属性来进行改变:

<html:javascript formName="userForm" method=”xxx”/>

传智播客Struts(张老师)之Validator框架JS检验功能

 

这里我们采用默认的方法,知道这个方法之后,然后我们在表单的submit方法中进行访问:

<html:form action="/RegUser" onsubmit="return validateUserForm(this);">

….

</html:form>

然后表单就具有JavaScript校验功能了:

传智播客Struts(张老师)之Validator框架JS检验功能

 

但是关于struts validator校验器生成的javascript校验功能,还有一个问题,给合这个例子来看,当我们什么都不填写时只会弹出一个对话框,但是如果密码长度很短,就会弹出两个对话框,效果如下:

传智播客Struts(张老师)之Validator框架JS检验功能传智播客Struts(张老师)之Validator框架JS检验功能

 

从这两个对话框可以看出规律,就是对于多个表单字段元素违背的同一个校验规则的信息都显示在一个对话框,其实没必要一下显示多个对话框,我们希望只弹出第一个对话框,只有修完第一个对话框的问题后才单独弹出第二个对话框的内容,这就涉及到Javascript的短路功能了,而要实现短路功能我们只要在struts配置文件中配validator插件中将”stopOnFirstError”属性设为”true”既可,如:

    <plug-in className="org.apache.struts.validator.ValidatorPlugIn">

       <set-property property="pathnames"

       value="/WEB-INF/validator-rules.xml,/WEB-INF/validation.xml"/>

       <set-property property="stopOnFirstError" value="true"/>

    </plug-in>

这样就只会弹出一个对话框来显示同组的校验错误信息,等修改好这一组后再会弹出第二个对话框,显示效果:

传智播客Struts(张老师)之Validator框架JS检验功能传智播客Struts(张老师)之Validator框架JS检验功能

 

如果要为ValidatorActionForm对应的表单生成前台的javaScript校验代码,可以使用类似如下的代码:<html:javascript formName="/addUser"/>,其中的formName与校验域的名字完全一样,生成的javascript方法则是按formBean的名称来的。

分享到:
评论

相关推荐

    Validator验证框架.pdf

    通过使用Validator框架,开发人员可以简化验证逻辑,提高代码的可维护性和重用性。本文将详细介绍Validator框架的基本概念、安装配置流程以及如何在Struts项目中集成和使用它。 #### 二、Validator框架介绍 ...

    bootstrapvalidator页面数据验证.zip

    通过使用JavaScript和jQuery,BootstrapValidator能够实时检测用户的输入,并在不符合规则时立即显示错误提示,提升用户体验。 安装BootstrapValidator需要引入必要的CSS和JS文件。压缩包中的"bootstrapvalidator-...

    validator页面验证插件

    Validator插件主要关注前端验证,它通过JavaScript实现,能在用户提交表单前就检查输入内容。 **二、Validator插件功能特性** 1. **自定义验证规则**:Validator插件允许开发者定义自己的验证规则,比如邮箱格式、...

    bootstrap-validator插件.zip

    Bootstrap Validator是一款基于Bootstrap框架的前端表单验证插件,它为开发者提供了强大的工具来确保用户在提交表单之前输入的数据是准确且完整的。这个插件的出现极大地简化了前端验证的过程,使得表单验证变得更加...

    js 校验框架3.0测试版

    JS校验框架3.0测试版是一款针对JavaScript编程的验证工具,旨在提高Web应用的用户体验和数据准确性。通过这款框架,开发者能够轻松实现对用户输入数据的有效性检查,确保前端数据在提交到服务器前满足预设的规则,...

    Silverna Validator

    4. **易于集成**:Silverna Validator V1.0版本设计为易于与其他前端框架(如jQuery、AngularJS、Vue.js等)或后端框架(如ASP.NET、Spring等)集成,开发者可以快速地将验证功能引入到现有的项目中。 5. **跨平台...

    bootstrapValidator+Servlet+jsp 用户名remote检验存在

    BootstrapValidator是一个流行的JavaScript库,用于在Bootstrap框架中实现强大的表单验证。在这个项目中,“bootstrapValidator+Servlet+jsp 用户名remote检验存在”表明我们正在使用这些技术来验证用户名的唯一性,...

    前端开源库-vue-template-validator

    在前端开发中,Vue.js是一个非常流行的JavaScript框架,它以其简洁的模板语法和组件化特性受到广泛欢迎。然而,随着项目规模的增长,模板的复杂性也随之增加,错误和不合规的模板语法可能难以察觉。Vue-template-...

    BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

    Bootstrap Validator 是一款强大的前端表单验证插件,它基于 Bootstrap 框架,提供了一种简单易用的方式来验证用户在表单中输入的数据。在实际使用中,有时我们可能会遇到针对隐藏域(`&lt;input type="hidden"&gt;`)的...

    validator-array-props-vue

    在Vue.js框架中,`validator-array-props`通常是指一种处理数组类型属性验证的方法,用于确保用户输入的数据符合预设的规则。这个标题暗示我们将会探讨如何在Vue组件中使用数组作为道具(props)并进行有效验证。Vue...

    FormValidation.js

    `FormValidation.js` 支持这种场景,能实时检测并验证新添加的元素。 ### 2. **安装与引入** 在项目中使用 `FormValidation.js`,首先需要将其下载或通过npm、yarn等包管理器进行安装。然后在HTML文件中引入库文件...

    ez_validator

    网上搜集的一个依托Jquery框架的页面验证框架,比JQuery自带的validadtion Plugin简单好用,里面有PDF使用说明。简单例子如下: 基本检验 不能为空 此项不能为空" /&gt; 提交" /&gt; $('#myform1').checkForm...

    JQuery验证框架jqBootstrapValidation.zip

    `jqBootstrapValidation`是一个基于jQuery的轻量级验证框架,专门设计用于增强Bootstrap框架中的表单验证功能。这个框架的主要目标是提供一种简便的方法来确保用户输入的数据符合预设的规则,从而提高网页表单的用户...

    JS表单验证插件(原创)

    **Validator**通常指的是验证函数或者验证框架,它可以是一系列预定义的验证规则,用于检查用户输入是否符合特定条件。在JavaScript或jQuery中,我们可以自定义验证规则,如验证邮箱格式`function isEmail(email) {....

    bootstrapvaildator.rar

    BootstrapValidator的核心功能在于它可以自动检测并验证表单中的输入字段,确保用户提交的数据符合预设的格式和要求。其主要特点包括: 1. **丰富的验证规则**:BootstrapValidator内置了多种常见的验证规则,如...

    struts从入门到精通.doc

    - 讨论了如何利用JavaScript增强Validator框架的功能。 - **11.1 在struts中用validator作服务器端验证** - 介绍了如何在Struts应用中使用Validator框架来进行服务器端验证。 #### 第12章 Struts HTML标签库 - *...

    JQ,JS表单验证大全

    `JQ` 和 `JS` 是两种常见的JavaScript库,它们在处理表单验证时各有优势。`JQ`(jQuery)简化了DOM操作,而`JS`(JavaScript)提供了更为底层的控制。本文将深入探讨如何使用jQuery(JQ)和纯JavaScript(JS)进行...

    JavaScript常用验证脚本总结

    - `moment.js` 库提供更强大的日期时间处理和验证功能。 9. **密码强度验证**: - 检查密码长度、是否包含数字、字母、特殊字符等,可自定义规则。 - `zxcvbn` 库可以评估密码强度并给出评分。 10. **表单验证*...

    ext判断该用户是否在数据库中存在

    2. 在 validator 函数中,使用 Ext.Ajax.request 方法发送 AJAX 请求,检测用户名是否已经存在于数据库中。 3. 在服务器端,使用数据库查询来检测用户名是否已经存在于数据库中。 4. 在客户端,使用 validator 函数...

Global site tag (gtag.js) - Google Analytics