|
OperaMasks2.3增强的客户端校验
1. 常规的OperaMasks客户端校验在旧版本的OperaMasks中，客户端校验始终是一块软肋。许多应用中客户端校验比较薄弱，关于OperaMasks客户端校验请参考OperaMasks参考手册。 在旧版本的OperaMasks中，客户端校验主要存在以下问题：
OperaMasks2.3兼容旧版本中的客户端校验，并且对这些场景进行了功能改进，使客户端校验得到加强，满足更多的客户端校验场景。 2. 增强的OperaMasks2.3客户端校验场景：表单中有一个w:textField组件，在用户输入完之后，组件失去焦点时对用户输入的值进行校验
<w:form clientValidate="true">
<w:textField validateEvents="onblur">
<f:validateLength minimum="3" maximum="6" />
</w:textField>
</w:form>
2.2. 每个组件可以校验的时机可以设置多个场景：表单中有一个w:textField组件，在用户输入时或输入之后失去焦点时，对用户输入的值进行校验
<w:form clientValidate="true">
<w:textField validateEvents="onblur,onkeyup">
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
</w:form>
场景：表单中有两个w:textField组件，在第一个组件输入完之后，根据输入值的不同决定是否要求第二个组件进行校验
<w:form clientValidate="true">
<w:textField jsvar="username" validateEvents="onkeyup">
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
<w:textField id="reValidateUsername" validateEvents="onkeyup">
<ajax:clientValidator>
return username.validate();
</ajax:clientValidator>
</w:textField>
</w:form>
2.4. 可以在表单上进行全局设置，该表单中的组件将根据全局设置进行客户端校验场景：表单中有很多输入组件，大部分组件都要求在失去焦点时进行校验，只有一个组件要求在输入时进行校验
<w:form clientValidate="true" validateEvents="onblur">
<w:textField jsvar="username" >
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
<w:textField id="password" validateEvents="onkeyup">
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
</w:form>
场景：当用户直接点提交按钮时，需要对表单中所有组件进行校验
<w:form clientValidate="true" validateEvents="onblur" validateBeforeSubmit="true">
<w:textField jsvar="username" >
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
</w:form>
2.6. 可以指定在表单提交前校验某个组件场景：在表单中有多个组件，表单提交时只对某个组件进行校验
<w:form clientValidate="true" validateBeforeSubmit="false" onsubmit="return password.validate();">
<w:textField jsvar="username" >
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
<w:textField jsvar="password">
<f:validateLength minimum="3" maximum="6"/>
</w:textField>
</w:form>
客户端校验最常用的技巧
希望通过此实例，让大家对客户端校验有更深的认识。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML PUBLIC "" ""> <f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout" xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax" renderKitId="AJAX"> <w:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </w:head> <w:page title="客户端校验测试">
4. OperaMasks2.3的客户端校验总结目前OperaMasks2.3的客户端校验基本满足所需的场景，当然金无足赤，人无完人，OperaMasks也存在少数覆盖不到的场景，为此，我们正在努力的去对特殊场景进行实现，并且我们会提供相应的解决方案，解决相应场景的问题。 所有评论
jones
2010-04-18
评论道：
不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！不错！
会喝特仑苏的奶牛
2009-10-26
评论道：
很好，刚需要这些知识。谢谢PETER
1 共1页
您还没有登录，请登录后发表评论
|
相关文章
|
<w:form validateBeforeSubmit="true" validateEvents="onblur">
<layout:panelGrid columns="3">
<h:outputText value="用户名："></h:outputText>
<w:textField id="username" allowBlank="false" blankText="用户名用户名不能为空">
<f:validateLength minimum="3" maximum="16"></f:validateLength>
</w:textField>
<h:outputText value="组件失去焦点时对用户输入的值进行校验，校验时机可以多个"></h:outputText>
<h:outputText value="密码："></h:outputText>
<w:textField id="password" jsvar="password">
</w:textField
<h:outputText value=""></h:outputText>
<h:outputText value="密码确认："></h:outputText>
<w:textField id="passwordValidate" validatorMessage="密码确认与前一次不同，请重新输入" validateEvents="onkeyup"
jsvar="passwordValidate">
<ajax:clientValidator>
return value == password.getValue();
</ajax:clientValidator>
</w:textField>
<h:outputText value="表单中的一个构件在某个事件发生时对自己和其他构件进行校验，比如常见的确认密码校验"></h:outputText>
<h:outputText value="电子邮箱："></h:outputText>
<w:textField id="email" validateEvents="onkeyup">
<ajax:clientValidator>
var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return pattern.test(value);
</ajax:clientValidator>
</w:textField>
<h:outputText value="测试正则表达式校验"></h:outputText>
</layout:panelGrid>
<w:button id="submit" value="提交"/>
</w:form>
</w:page>
</f:view>