JQueryEasyUI 表单验证之验证框(非空验证)

JQueryEasyUI 专栏收录该内容
17 篇文章 0 订阅

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>





  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

寂寞的一只狗

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值