首先,我们在用这个验证之前,我们要做一些准备工作 :
1.把clientvalidators-X.X.jar放到类路径下面.
2.把taglib声明添加到JSP页面中
<%@ taglib uri="http://sourceforge.net/projects/jsf-comp/clientvalidators" prefix="cv"%>
3.定义组件(按钮or表单)提交时触发的JS回调函数.例如:在表单的 onSubmit函数和按钮的onClick函数 等等....
Form onSubmit
<h:form id="form1" onSubmit="return validate();" />
Button onClick
<h:commandButton id="btn1" onClick="return validate();" />
该步骤重要
4:定义servlet映射
该组件通过/faces/* 前缀来载入需要的资源,一个JS文件. 确定你在web.xml文件中定义了
<servlet-mapping
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
详细介绍每一个验证组件的使用.
Required Field Validator
大家都不陌生的一个需求验证,要求输入内容
属性:
componentToValidate 要验证的组件id, 每个验证组件都有该属性,下面就不在介绍
errorMessage 要显示的错误消息 每个验证组件都有该属性,下面就不在介绍
highlight 是否高亮显示 true/false, 默认值为false.每个验证组件都有该属性,下面就不在介绍
display 验证错误的显示模式. 可能的值为 "static", "dynamic" (default), "none".下面会有进一步下说明. 每个验证组件都有该属性,下面就不在介绍
style 用于验证消息的CSS 每个验证组件都有该属性,下面就不在介绍
示例:
<cv:requiredFieldValidator componentToValidate="txt1" highlight="true" display="dynamic" errorMessage="Value is required"/>
Range Validator 范围验证
minValue or maxValue 是必须的.
属性:
componentToValidate
minValue 输入的最小值
maxValue 输入的最大值
errorMessage
highlight
display
style
示例:
<cv:rangeFieldValidator componentToValidate="txt1" minValue="10" maxValue="20" highlight="true" />
Compare Validator 验证两个组件的输入值是否相等.验证两个密码的时候比较有用.
属性:
componentToValidate
componentToCompare 要比较值的另外一个组件id
operator 比较的操作, 可以为"eq" or "not". 相等或者不等.
errorMessage
highlight
display
style
示例:
<cv:compareValidator componentToValidate="txt1" componentToCompare="txt2" op="not" errorMessage="Value is invalid"/>
Regular Expression Validator 正则表达式验证, 比较强大,可以验证email
属性:
componentToValidate
pattern 正则表达式模式. 参考java中的pattern类
errorMessage
highlight
display
style
示例:
<cv:regularExpressionValidator componentToValidate="txt1" pattern="/[abcd]/" highlight="true" />
<cv:regularExpressionValidator componentToValidate="emailAddress" pattern="/^([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+/.[a-zA-Z]{2,3}$/gi" highlight="true" errorMessage="请输入有效的电子邮件" />
Length Validator Validator 长度验证
属性:
componentToValidate
exactly 如果指定该值,那么输入的长度一定要等于该值的长度
min 长度的最小值
max 长度的最大值
errorMessage
highlight
display
style
示例:
<cv:lengthValidator componentToValidate="txt1" exactly="10" display="dynamic" errorMessage="Value is invalid"/>
Integer Only Validator 该验证没有实现为一个组件, 而是用一个js函数来代替. 该函数显示键入的字符并且值允许字符为整数, 调用的函数必须是
keyPressNumber(false); 在onkeypress事件上调用.
例子:
属性: 没有属性
<h:inputText id="txt_ssn" value="#{pc_Index.person.ssn}" οnkeypress="keyPressNumber(false);"/>
Custom Validator
自定义验证, 给你提供一个扩展的接口
属性:
componentToValidate
function
自定义验证函数
params
函数的参数
errorMessage
highlight
display
style
示例:
<cv:customValidator componentToValidate="txt_custom" function="customFunctionName" params="'form1:txt_custom'" />
以下为代码:
属性:
style
示例:
<cv:validationSummary />
Script Generator 主要的一个负责编码验证函数调用的组件
属性:
form
要验证的form 的id
popup 是否显示验证信息为popup, 默认值为false.
示例:
<cv:scriptGenerator popup="false" />
国际化和错误消息问题
Client validators使用下面的顺序来查找错误消息
1) errorMessage 属性
首先应用该处的错误消息,可以使用值绑定表达式
2) Resource Bundle 如果在1中没有指定值,则使用这里包含在资源文件中的消息,
每个消息的key 在下面介绍
3) Built-in constant messages.
如果前面两步都没有错误消息,那么使用代码中硬编码的消息
关于display 属性的值
显示模型可以通过display属性来自定义. 下面是几种模型的解释:
dynamic
默认值,显示消息的空间(html标签)不是总是存在的,只有当错误消息出现时候才动态生成的.
static
显示消息的标签总是存在的.
none
不在组件后面显示错误消息, 只是在总结中显示总的错误消息
display 只是控制响应错误消息的div的 display css属性: 使用none时候,会产生下面的css 到该消息div上.style="DISPLAY: none"
资源绑定的消息的key
CV_REQUIRED_FIELD_VALIDATOR_ERROR = Some Text
CV_COMPARE_VALIDATOR_ERROR = Some Text
CV_RANGE_VALIDATOR_ERROR = Some Text
CV_REGULAR_EXPRESSION_VALIDATOR_ERROR = Some Text
CV_LENGTH_VALIDATOR_ERROR = Some Text
1.把clientvalidators-X.X.jar放到类路径下面.
2.把taglib声明添加到JSP页面中
<%@ taglib uri="http://sourceforge.net/projects/jsf-comp/clientvalidators" prefix="cv"%>
3.定义组件(按钮or表单)提交时触发的JS回调函数.例如:在表单的 onSubmit函数和按钮的onClick函数 等等....
Form onSubmit
<h:form id="form1" onSubmit="return validate();" />
Button onClick
<h:commandButton id="btn1" onClick="return validate();" />
该步骤重要
4:定义servlet映射
该组件通过/faces/* 前缀来载入需要的资源,一个JS文件. 确定你在web.xml文件中定义了
<servlet-mapping
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
详细介绍每一个验证组件的使用.
Required Field Validator
大家都不陌生的一个需求验证,要求输入内容
属性:
componentToValidate 要验证的组件id, 每个验证组件都有该属性,下面就不在介绍
errorMessage 要显示的错误消息 每个验证组件都有该属性,下面就不在介绍
highlight 是否高亮显示 true/false, 默认值为false.每个验证组件都有该属性,下面就不在介绍
display 验证错误的显示模式. 可能的值为 "static", "dynamic" (default), "none".下面会有进一步下说明. 每个验证组件都有该属性,下面就不在介绍
style 用于验证消息的CSS 每个验证组件都有该属性,下面就不在介绍
示例:
<cv:requiredFieldValidator componentToValidate="txt1" highlight="true" display="dynamic" errorMessage="Value is required"/>
Range Validator 范围验证
minValue or maxValue 是必须的.
属性:
componentToValidate
minValue 输入的最小值
maxValue 输入的最大值
errorMessage
highlight
display
style
示例:
<cv:rangeFieldValidator componentToValidate="txt1" minValue="10" maxValue="20" highlight="true" />
Compare Validator 验证两个组件的输入值是否相等.验证两个密码的时候比较有用.
属性:
componentToValidate
componentToCompare 要比较值的另外一个组件id
operator 比较的操作, 可以为"eq" or "not". 相等或者不等.
errorMessage
highlight
display
style
示例:
<cv:compareValidator componentToValidate="txt1" componentToCompare="txt2" op="not" errorMessage="Value is invalid"/>
Regular Expression Validator 正则表达式验证, 比较强大,可以验证email
属性:
componentToValidate
pattern 正则表达式模式. 参考java中的pattern类
errorMessage
highlight
display
style
示例:
<cv:regularExpressionValidator componentToValidate="txt1" pattern="/[abcd]/" highlight="true" />
<cv:regularExpressionValidator componentToValidate="emailAddress" pattern="/^([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|/-|/.]?)*[a-zA-Z0-9]+/.[a-zA-Z]{2,3}$/gi" highlight="true" errorMessage="请输入有效的电子邮件" />
Length Validator Validator 长度验证
属性:
componentToValidate
exactly 如果指定该值,那么输入的长度一定要等于该值的长度
min 长度的最小值
max 长度的最大值
errorMessage
highlight
display
style
示例:
<cv:lengthValidator componentToValidate="txt1" exactly="10" display="dynamic" errorMessage="Value is invalid"/>
Integer Only Validator 该验证没有实现为一个组件, 而是用一个js函数来代替. 该函数显示键入的字符并且值允许字符为整数, 调用的函数必须是
keyPressNumber(false); 在onkeypress事件上调用.
例子:
属性: 没有属性
<h:inputText id="txt_ssn" value="#{pc_Index.person.ssn}" οnkeypress="keyPressNumber(false);"/>
Custom Validator
自定义验证, 给你提供一个扩展的接口
属性:
componentToValidate
function
自定义验证函数
params
函数的参数
errorMessage
highlight
display
style
示例:
<cv:customValidator componentToValidate="txt_custom" function="customFunctionName" params="'form1:txt_custom'" />
以下为代码:
- function customFunctionName(param1) {
- var value = document.all[param1].value;
- if(value == 'someValueToBeTested')
- return true;
- else
- return false;
- }
属性:
style
示例:
<cv:validationSummary />
Script Generator 主要的一个负责编码验证函数调用的组件
属性:
form
要验证的form 的id
popup 是否显示验证信息为popup, 默认值为false.
示例:
<cv:scriptGenerator popup="false" />
国际化和错误消息问题
Client validators使用下面的顺序来查找错误消息
1) errorMessage 属性
首先应用该处的错误消息,可以使用值绑定表达式
2) Resource Bundle 如果在1中没有指定值,则使用这里包含在资源文件中的消息,
每个消息的key 在下面介绍
3) Built-in constant messages.
如果前面两步都没有错误消息,那么使用代码中硬编码的消息
关于display 属性的值
显示模型可以通过display属性来自定义. 下面是几种模型的解释:
dynamic
默认值,显示消息的空间(html标签)不是总是存在的,只有当错误消息出现时候才动态生成的.
static
显示消息的标签总是存在的.
none
不在组件后面显示错误消息, 只是在总结中显示总的错误消息
display 只是控制响应错误消息的div的 display css属性: 使用none时候,会产生下面的css 到该消息div上.style="DISPLAY: none"
资源绑定的消息的key
CV_REQUIRED_FIELD_VALIDATOR_ERROR = Some Text
CV_COMPARE_VALIDATOR_ERROR = Some Text
CV_RANGE_VALIDATOR_ERROR = Some Text
CV_REGULAR_EXPRESSION_VALIDATOR_ERROR = Some Text
CV_LENGTH_VALIDATOR_ERROR = Some Text