表单校验

简介

1.支持对指定表单内部的输入框、日期框、单选框、复选框、下拉框、F7等控件进行合法性校验。
2.支持以属性的方式设置默认校验规则【控件级】。
3.支持以属性的方式指定自定义规则(前端js函数)【控件级】。
4.支持以属性的方式指定ajax的验证方式【控件级】。
5.支持json属性的方式指定是否在表单提交时(后)才进行验证。
6.支持form提交后,判断如果有验证错误,将错误总数提示信息通过msgarea展现。
7.每个控件验证不通过时,默认将本身的(如input)或外部容器的(如radio)外框变红。
8.每个控件的异常提示支持“嵌入式”和“浮动式”2种方式,对“嵌入式”同时支持在右侧显示和在下方显示的设置。
9.支持错误信息显示的样式和验证通过执行函数的设置。


使用方法

1. 静态框架使用方法仅EAS7.5版本
<waf:validator id="v_name1" rules="required:true" errMsg="required:'名称不能为空!'"></waf:validator>
2. JS动态创建EAS8.0+
//先创建一个form
var formOptions={
	id:"form_1",
	//此属性必填
	validateOptions:"{onsubmit:false,onfocus:true,onblur:false,onkeyup:false,onclick:false,onchange:true}"
};
var formDom = waf.createDOM("form", formOptions);
waf.appendDOM(waf("body"), formDom);
waf.initComponent("form", formOptions, formDom);

//创建控件
var tdom = waf.createDOM("text", {id:"text_cs"});
waf.appendDOM($("#form_1"), tdom);
waf.initComponent("text", {id:"text_cs"}, tdom);
//创建校验
myVolidatorOption = {
	rules:"required:true,minlength:2",
	errMsg:"required:'必填字段,最小长度为2'"
	//errorLabelPosition:'bottom',
	//validatetrigger:"keyup"
};
//添加校验
waf.initComponent("validator", myVolidatorOption, $("#text_cs"));
3. 通用DOM创建EAS8.0+
<input id="id" name="number" type="text" class="enter2tab ui-validator form" ctrlrole="validator" aria-disabled="false" style="" tabindex="0">
<!--DOM创建好之后,使用js初始化控件-->
waf("#id").wafValidator(options);
4. 方法&事件使用EAS7.5+
//调用方法
waf("#FormID").wafFormValidator("option",property,value);
waf("#FormID").wafFormValidator("validateForm");
waf("#FormID").wafFormValidator("resetFormValidate");
waf("#FormID").wafFormValidator("getElemNumberOfInvalids ");

属性说明

表单标签属性

rules String 缺省值: 无 EAS7.5+

定义内置校验规则。如:rules=’required:true,minlength:2’

customvalidate function 缺省值: 无) (函数参数:value和element EAS7.5+

自定义js校验函数。函数参数为value和element,分别代表被校验控件的当前值和控件jquery对象。js中如果出现校验异常,要返回提示信息。

validatetrigger String 缺省值: 无 EAS7.5+

定义触发哪些事件时进行校验。可选参数有focus、blur、click、keyup和datachange。可在ajax校验时去掉keyup和datachange校验,这样可以减少对服务器的压力(如果需要服务器端校验的话)

errMsg String 缺省值: 系统默认信息 EAS7.5+

定义内置校验规则的异常提示信息。rules中的某项验证如果在errMsg中未定义相应的信息内容,则采用系统默认提示信息。

errorLabelPosition String 缺省值: bottom EAS7.5+

定义异常提示信息在嵌入展现方式时的展现位置,提供在控件下方和右侧两种展现方式。
设置errorLabelPosition=’bottom’为下方展现,errorLabelPosition=’right’为右侧展现,不设置则默认下方展现。要支持右侧展现需要给控件右边(相对于容器的右边框)留下足够的空间,否则仍然会显现在控件下方。

errorShowMode String 缺省值: embeded EAS7.5+

定义异常提示信息的展现方式,提供嵌入和浮动两种展现方式。
设置errorShowMode=’embeded’为嵌入展现,errorShowMode=’float’为浮动展现,不设置则默认为嵌入展现。单选和复选框不受此属性控制,只支持嵌入展现。

validateOnSumbit String 缺省值: true EAS7.5+

定义是否表单提交时校验,默认为’true”,设置为’false”则无论表单是否提交均进行校验(随时校验)。

suspend Boolean 缺省值: false EAS7.5+

定义此控件是否不进行校验,设为’true”则不校验。


方法说明

option 参数: (property[,value]) 返回值类型: 空或值 EAS7.5+

获得或设置表单级校验相关的某属性的值,当value参数存在时,设置property属性值,且无返回值,否则返回property属性值. 参考样例

  • 参数说明:
            - property为属性名
  • 返回值说明:
            - value为属性值
    如:waf(“#commentForm”).wafFormValidator(“option”,”formValidateOptions”,{errorShowMode:float,onclick:false});

validateForm 参数: (none) 返回值类型: Boolean EAS7.5+

执行表单验证,如果有验证错误返回false.参考样例

  • 参数说明:
            - 无
  • 返回值说明:
            - boolean值
    如:waf(“#FormID”).wafFormValidator(“validateForm”);

resetFormValidate 参数: (none) 返回值类型: Boolean EAS7.5+

重置FORM验证状态,如果有验证错误返回false. [参考样例V8.2][参考样例V8.5]

  • 参数说明:
            - 无
  • 返回值说明:
            - boolean值
    如:waf(“#FormID”).wafFormValidator(“resetFormValidate”);

validateElement 参数: (jquery对象) 返回值类型: Boolean EAS7.5+

验证单个元素,如果有验证错误返回false. 参考样例

  • 参数说明:
            - 要校验的页面元素的jquery对象
  • 返回值说明:
            - boolean值
    如:waf(“#FormID”).wafFormValidator(“validateElement”,waf(“#txt_name1”));

getElemNumberOfInvalids 参数: (none) 返回值类型: Number EAS7.5+

验证单个元素,如果有验证错误返回false. 参考样例

  • 参数说明:
            - 无
  • 返回值说明:
            - 返回表单验证出现错误的元素个数
    如:waf(“#FormID”).wafFormValidator(“getElemNumberOfInvalids”);

getElemsOfInvalids 参数: (none) 返回值类型: Array EAS7.5+

验证单个元素,如果有验证错误返回false. 参考样例

  • 参数说明:
            - 无
  • 返回值说明:
            - 返回实际参与表单验证的元素集合
    如:waf(“#FormID”).wafFormValidator(“getElemsOfInvalids”);

样例集合

  1. 综合用法示例1:
  2. 综合用法示例2:
  3. 综合用法样例3:
  4. 内置规则:
  5. 校验标签:
  6. 动态示例: