表单校验

简介

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. 动态示例: