easyUI之表单验证validate

文本框校验,在easyUI的表单提交中，最常见的就是对文本框的校验，不同类型的输入项需要不同的校验类型,用户可以使用自带的验证类型也可以进行自定义。

1、普通文本框的非空校验

<input id="vv" class="easyui-validatebox" data-options="required:true" />

其中class属性为必写项，如果不写验证框架则会缺少警告样式，required表示该文本框是否为必填项，为true时表示必填。

2、自定义验证类型

有时在进行表单验证时，有些文本框非必填但若输入内容却需要验证内容的合法性，则需要用到validType属性。easyUI提供了验证类型的扩展实现方法如下，使用时与第一种区别不大，只是多了一个validType属性，如

$.extend($.fn.validatebox.defaults.rules,{
	NotEmpty : { // 非空字符串验证。 easyui 原装required 不能验证空格
				validator : function(value, param) {
					return $.trim(value).length>0;
				}, 
				message : '该输入项为必输项'
			},
	integer : {// 验证整数
				validator : function(value) {
					return /^[+]?[0-9]+\d*$/i.test(value);
				},
				message : '请输入整数'
			},			
	 english : {// 验证英语
				validator : function(value) {
					return /^[A-Za-z]+$/i.test(value);
				},
				message : '请输入英文'
			},
});

文本框在应用验证框架时，表示非必填，但是填入了以后判断是否为整数，使用方法如下。(常见的校验还有如身份证号、电子邮件等，有需要的可以直接下载easyUI常用校验)

<input id="vv" class="easyui-validatebox" data-options="validType:'integer'" />

3、自定义表单验证函数

有时根据实际需要，当表单验证未通过后需要将焦点定位到第一个未验证通过的文本框，可以通过下列自定义函数实现：

其中id指的是提交的表单的id,因此必须要给提交的表单一个id值。

function validate(id){
    var validate = $("#"+id).form('validate')
    if (!validate) {
       $.messager.alert("确认", '请正确填写表单！',"",function(){
       $("#"+id).find(".validatebox-invalid:first").focus();
                  });
                  return false
              }
              return true
           }

//注：若希望查看未通过的文本框的id,则可以调用代码

alert($("#"+id).find(".validatebox-invalid:first").attr("id"));