基本原理

  通过使用html中表单元素的自定义属性verify和condition来达到自动校验表单元素是否填写正确、并根据校验结果提示相应信息的目的。页面初始化时会为每个带有verify属性的表单元素附加相应的onkeyup、onchange、onfocus事件,以便于这些事件被触发时自动校验与提示。

 

html中的用法

  Verify在html中的用法如下所示:

  <input type="text" id="Code" verify="代码|NotNull&&Int" condition="$NV('Type')=='Custom'"/>

  其中verify属性值为校验字符串,由以"|"分隔的两部分组成,前半部分表示控件信息,后半部分表示校验规则,一个控件可以有多个校验规则,各个校验规则之间以"&&"分隔。condition属性值表示当condition所指明的JavaScript语句返回值为真时才校验,否则不校验。

  可用的校验规则包括:

  1) NotNull:不能为空;

  2) Number:必须是数字;

  3) Int:必须是整数;

  4) Time:必须是时间;

  5) Date:必须是日期;

  6) DateTime:必须是带日期的时间;

  7) Email:必须是合法的电子邮件地址;

  8) Regex:表示控件值必须符合指定的正由表达式,例如verify="Regex=\d{4}"表示控件值必须是4位数字;

  9)Script:表示指定的JavaScript脚本返回值必须为真,例如verify="Script=check()"表示执行check(),如果check()返回值为真则校验通过,否则校验不通过。

  以上为例,如果onkeyup、onchange、onfocus事件触发时$NV('Type')=='Custom'成立且控件的值为空或者不是整数,则会自动提示"代码为不能为空"或者"代码为必须是整数"。

 

提交数据时的用法

  表单提交或者调用Server.sendRequest时需要事先校验页面中的相应元素是否已正确填写,这时可以使用类似如下的JavaScript语句:

  if(Verify.hasError(arr,ele)){

  return;

  }

  Verify.hasError会自动检查ele下的所有(但不在arr之内)的表单元素是否已正确填写,如果有未正确填写的,则弹出提示对话框。如果Verify.hasError的参数为空,则检查整个页面。

  示例(校验表单F1下所有表单元素,但不包括ID为Code和Name的元素):

  if(Verify.hasError(["Code","Name"],"F1")){

  return;

  }

 

注意事项

  1)校验规则为1-7时,提示信息=控件信息+校验规则含义,如verify="ID|NotNull"且校验未通过时,则提示"ID不能为空";

  2)校验规则为1-7时,校验字符串可以不写提示信息,如verify="NotNull"且校验未通过时,则提示"不能为空";

  3)校验规则为8、9时,提示信息就是控件信息,如verify="必须是合法的IP|Regex=\d{1-3}\.\d{1-3}\.\d{1-3}\.\d{1-3}\"且校验未通过时,则提示"必须是合法的IP"。