客户端校验

许多时候，我们会希望在客户端使用javascript脚本进行简单的校验，过滤掉大部分明显的错误输入，从而减少与服务器端进行过多交互造成的性能损失。针对这种需求，OperaMasks提供了两种解决方案。

首先，所有预定义的校验器都支持切换到客户端校验，只需要在页面中组件所属的w:form标签上设定属性：clientValidate="true"。例如，上例的页面若改为：

<w:form id="calc" clientValidate="true">
      <layout:panelGrid columns="3">
...
      </layout:panelGrid>
      <br/>
...
</w:form>

仍然可以获得同样的展现效果，但校验行为将在客户端完成，不会与服务器发生交互：

若观察客户端页面源代码，可以发现OperaMasks自动添加了以下javascript：

<script type="text/javascript" language="Javascript">
  document.forms['calc']._validators=[
  new RequiredValidator('calc:first','数值一:: 校验错误，输入不能为空。','calc:j_id3'),
  new FloatValidator('calc:first','该数值必须位于10至100之间','calc:j_id3',10.0,100.0),
  new RequiredValidator('calc:second','数值二:: 校验错误，输入不能为空。','calc:j_id5')];
</script>

其次，对于需要用户定制的客户端校验逻辑，可以写在<ajax:clientValidator/>标签中。例如在上面例子中，若希望加入限制条件，禁止在数值一中输入514，可以对页面做如下修订：

<w:textField id="first">
  <ajax:clientValidator message="数值不能等于514">
    if(value == 514) return false;
    return true;
  </ajax:clientValidator>
</w:textField>

	在<ajax:clientValidator>标签中可嵌入javascript代码。
	校验代码中可直接使用变量value引用组件的输入值。
	在校验代码中返回true表示校验通过，返回false表示校验失败。

展现效果如下：