JQueryEasyUI 表单验证

来源：互联网发布：淘宝一元秒杀编辑：程序博客网时间：2024/05/01 05:30

1，介绍

使用EasyUI Form 的onSubmit 事件可以在客户端表单提交之前进行验证，只需在onSubimt事件中使用
return $("#表单ID").form('validate') 方法即可
.form('validate')会自动对指定的表单中的required=true 的元素进行验证，又不通过元素时，返回一个false

2，方法

方法名参数值类型描述validatenone进行表单字段验证，当所有字段均有效时返回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>

0 1