基本原理
通过使用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语句返回值为真时才校验,否则不校验。
可用的校验规则包括:
NotNull:不能为空。
Number:必须是数字。
Int:必须是整数。
Time:必须是时间。
Date:必须是日期。
DateTime:必须是带日期的时间。
Email:必须是合法的电子邮件地址。
Regex:表示控件值必须符合指定的正由表达式,例如verify="Regex=\d{4}"表示控件值必须是4位数字。
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-7时,提示信息=控件信息+校验规则含义,如verify="ID|NotNull"且校验未通过时,则提示"ID不能为空";
校验规则为1-7时,校验字符串可以不写提示信息,如verify="NotNull"且校验未通过时,则提示"不能为空";
校验规则为8、9时,提示信息就是控件信息,如verify="必须是合法的IP|Regex=\d{1-3}\.\d{1-3}\.\d{1-3}\.\d{1-3}\"且校验未通过时,则提示"必须是合法的IP"。
|
所有评论仅代表网友意见