zoukankan      html  css  js  c++  java
  • Jquery EasyUI 中ValidateBox验证框使用讲解(转)

      Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 使用$.fn.validatebox.defaults重写默认值对象。

    具体用法如下:

    <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />

    使用Javascript创建验证框,具体代码如下: 

    <input id="email" type="text" name="email"/> 
    $('#email').validatebox({   
        required: true,   
        validType: 'email'  
    });

    检查密码和确认密码是否相同,具体代码如下: 

    <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />  
    <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']" /> 
      
    $.extend($.fn.validatebox.defaults.rules, {   
        equals: {   
            validator: function(value,param){   
                return value == $(param[0]).val();   
            },   
            message: 'Field do not match.'  
        }   
    });

    输入框中限制最小长度为5的自定义最小长度验证,具体代码如下:

    <input class="easyui-validatebox" data-options="validType:'minLength[5]'">
    $.extend($.fn.validatebox.defaults.rules, {   
        minLength: {   
            validator: function(value, param){   
                return value.length >= param[0];   
            },   
            message: 'Please enter at least {0} characters.'  
        }   
    });

    验证规则是根据使用需求和验证类型属性来定义的,如下: email:匹配E-Mail的正则表达式规则。

    url:匹配URL的正则表达式规则。

    length[0,100]:允许在x到x之间个字符。

    remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true。

    自定义验证规则,需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。

    正则表达式参考地址如下:

    http://blog.yoodb.com/yoodb/article/detail/306

    http://blog.yoodb.com/yoodb/article/detail/308

    yian
  • 相关阅读:
    Mysql基础知识:操作数据库
    Mysql基础知识:数据类型
    Struts2下载与使用
    Open Live Writer安装使用
    博客园界面设置
    (3)break、continue
    (2)基础语法
    查找五:散列表查找
    查找三:平衡二叉树
    centos 安装 masscan
  • 原文地址:https://www.cnblogs.com/xiangpeng/p/8471992.html
Copyright © 2011-2022 走看看