easyUI——表单验证

easyUI表单验证，主题：

1. 数据格式验证（easyUI已封装几个常用验证，例如：email、URL、length，另外，提供了可扩展接口，更多的验证自己定义即可）

2. 远程校验（需要和后台交互的校验），这个涉及到easyUI校验的触发机制。

3. 表单提交时的校验

easyUI的验证，定义input标签的class=“easyui-validatebox”，验证在dataoptions属性中。先看一段简单的代码：

验证用户名为必填字段：

<input class="easyui-validatebox" missingMessage="请填写用户名" data-options="required:true">

验证登录名必填且长度为1—5之间：

<input class="easyui-validatebox" missingMessage="请填写登录名" data-options="required:true,validType:'length[1,5]'">

自定义校验格式：easyUI提供了email、length、URL几个常用的验证，更多的校验，可以自己定义，例如，要验证密码长度为6，自定义方式如下：

<input class="easyui-validatebox" missingMessage="请填写密码" data-options="required:true,validType:'minLength[6,\'密码长度为6\']'">

<span></span>$.extend($.fn.validatebox.defaults.rules,{minLength:{validator:function(value,param){return value.length=param[0];},message:"{1}"}})

 扩展的自定义方法中，校验失败时的输出信息，可以是页面中定义的参数。

easyUI的远程校验，不建议采用。因为easyUI验证的触发，不是通过事件触发，而是设置了一个定时器，这个定时器在文本框获取焦点时启动，直到失去焦点时停止，默认是每个200毫秒校验一次，时间一到，不管值是否改变，都会再校验一次。所以，像这种需要和后台交互的验证，不建议使用该方式。我的思路是这样的：在标签的onblure()事件中请求后台，在页面定义一个标签显示校验结果，并将该标签的样式设置成easyUI提示信息的样式。为了更加通用，可以封装一个公共的js方法，参数包括url、参数、接收返回信息的标签id等等。

最后是表单提交，提交前需要判断所有的校验项是否全部校验成功，若有未通过校验项，不允许提交表单。目前，我用了两种实现方式：

function add(){var str = $(".validatebox-text.validatebox-invalid:first");if(str.val()!=null){alert("请检查带有警告的数据");return;}

或者

if($("#addUserForm").form("validate")){……}