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

最新推荐文章于 2019-08-05 17:34:47 发布

寂寞的一只狗

最新推荐文章于 2019-08-05 17:34:47 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： JQueryEasyUI 文章标签： jquery 表单 easyui

本文链接：https://blog.youkuaiyun.com/qq_35019337/article/details/61417216

JQueryEasyUI 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JQueryEasyUI的表单验证功能，包括验证框的非空验证，阐述了其设计目的——确保表单字段有效性。文章提及验证框的两个主要优点：内置丰富验证规则及可自定义验证规则，并提供了validType字段的验证类型说明和实际应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>