JQueryEasyUI 表单验证之验证框（非空验证）

1，介绍

  设计目的为了验证输入的表单字段是否有效
        如果无效，他将改变输入框的背景颜色，并显示警告图标和提示信息
        
        优点
        1.包含很多内置的验证规则
        2.可以自定义验证规则
        3.简单而强大的验证信息提示

2，属性

属性名	属性值类型	描述
missingMessage	string	当文档框未填写时出现的提示信息
invalidMessage	string	当文档框的内容被验证无效时出现提示
required	boolean	定义为必填字段
validType	string,array	定义字段验证类型，如email ，url等      1.一个有效类型字符串运用一个验证规则       2.一个有效类型数组，运用多个验证规则

3，validType字段验证类型介绍

字段名	描述
email	正则匹配邮箱
url	正则匹配url
length[0,100]	验证长度范围
remote['http://url','paramName']	发送ajax请求 进行验证  验证有效返回true

4，实例

   $(function () {
            DialongForm();

            loadValidate();
        });
        function DialongForm() {
            $("#validateboxFrm").dialog({
                title: '用户验证',
                width: 360,
                height: 300,
                modal:true
            });
        }
        //验证方法2
        function loadValidate() {
            //姓名
            $("#xm").validatebox({
                required: true,
                missingMessage:"请输入姓名"
            });
            //邮箱
            $("#yx").validatebox({
                required: true,
                missingMessage: "请输入邮箱",
                validType: 'email',
                invalidMessage:"格式不对",

            });
            //输入个人主页
            $("#zy").validatebox({
                required: true,
                missingMessage: "请输入主页",
                validType: 'url',
                invalidMessage: "格式不对",
            });
        }

<div  id="validateboxFrm">         <form id="form1" runat="server">             <table>                 <tr>                     <td>姓名：</td>                     <td><input id="xm" name="xm" class="easyui-validatebox textbox" /></td>                 </tr>                  <tr>                     <td>邮箱</td>                     <td><input id="yx" name="yx" class="easyui-validatebox textbox" /></td>                 </tr>                  <tr>                     <td>个人主页</td>                     <td><input id="zy" name="zy" class="easyui-validatebox textbox" /></td>                 </tr>                  <tr>                     <td>护照</td>                      <%-- 验证方法1 --%>                     <td><input id="hz" name="hz" class="easyui-validatebox textbox"                          data-options="required:true, validtype='length[8,20]',invalidMessage='有效长度8-20',missingMessage='请输入护照信息'"/>                         <%-- 几种渲染方法 必须有始有终 --%>                     </td>                 </tr>             </table>         </form>        </div>