EasyUI验证表单

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
步骤：
导入资源文件（EasyUI资源文件下载）
1，引入路径
2，创建验证页面
3，script的代码

效果图

---

开始编写前先要导入资源文件

1，引入路径

<link rel="stylesheet" type="text/css" href="res/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="res/css/themes/icon.css">
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery.easyui.min.js"></script>

2，创建验证页面
验证用户名长度时两种方式，一个是自定义验证规则，一个是自带的验证规则，

<form action="add">
        <h2 align="center">请注册</h2>
        <table align="center">
            <tr>
                <td>用户名：</td>
                <自定义验证规则>
                <td><input type="text" name="name" id="mess"
                    required="required" class="easyui-validatebox"
                    data-options="validType:'minLength[10]'"></td>
                <!--  自带的自带的验证规则 class="easyui-validatebox" data-options="required:true,validType:'length[3,10]',invalidMessage:'?????'"  -->
            </tr>
            <tr>
                <td>密 &nbsp;码：</td>
                <td><input type="password" name="pwd" id="ipwd"
                    class="easyui-validatebox" data-options="required:true">
                </t>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="pwd2" id="pwd2"
                    class="easyui-validatebox" required="required"
                    validType="equals['#ipwd']"></td>
            </tr>
            <tr>
                <td><input type="reset" value="重置"></td>
                <td><input type="button"  value="注册" onclick="submitForm()" ></td>
            </tr>

        </table>
    </form>

3，script的代码
extend minLength 自定义的用户名长度验证规则
extend equals 密码是否一样的验证规则
submitForm 验证是否符合验证规则，这个需要注意的是将注册submit的属性改为button，提交时成功就将表单提交，失败则提示错误留在原页面，

<script type="text/javascript">
function submitForm() {
            var b = $('form').form('enableValidation').form('validate');
            if (b) {
             //   alert("成功");
                $('form').submit();
            }
            else { 
                alert("不成功"); 
                }
}
$.extend($.fn.validatebox.defaults.rules, {    
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: '密码不一样'   
    }    

});
$.extend($.fn.validatebox.defaults.rules, { 
    minLength: {    
         validator: function(value, param){    
           return value.length >= param[0];    
        },    
        message: '长度太短'
}  
</script>

运行测试即可。