JQueryEasyUI 表單驗證

1，介紹

使用EasyUI Form 的onSubmit 事件可以在客戶端表單提交之前進行驗證，只需在onSubimt事件中使用
 return $("#表單ID").form('validate') 方法即可 
 .form('validate')會自動對指定的表單中的required=true 的元素進行驗證，又不通過元素時，返回一個false

2，方法

方法名	參數值類型	描述
validate	none	進行表單字段驗證，當所有字段均有效時返回true  該方法調用validatebox插件驗證

3,語法

$("#表單ID").form("submit",{
            onSubmit: function(){
                return  $("#表單ID").form('validate');    
            }
        });

4，實例

   $(function () {
            DialongForm();

            //loadValidate();

            //獲取
            $("#btn").linkbutton({
                onClick: function () {
                    submit();
                }
            });
        });
        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: "格式不對",
            });

            //輸入個人主頁
            $("#hz").validatebox({
                required: true,
                missingMessage: "請輸入護照信息",
                validType: 'length[8,20]',
                invalidMessage: "有效長度8-20",
            });
        }
        //表單驗證
        function submit() {
            $("#form1").form("submit", {
                onSubmit: function () {
                    if ($("#form1").form('validate')) {
                        console.info("1");
                    }
                    else {
                        console.info("2");
                    }
                    return false;
                    //真實項目 返回 return $("#form1").form('validate')
                    ;
                }
            });
        }

<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" /></td>
                 </tr>
             </table>
             <div>
                 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">控制檯</a>
             </div>
         </form>
        </div>