ValidateBox(验证框)

作者: 搁浅的双鱼 | 来源:发表于2016-06-13 23:46 被阅读255次

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

    ps(用的比较少,一般用textbox,反正继承validatebox,所以列子会在textbox上显示)

    属性

    属性名 类型 含义
    required boolean 必填字段
    validType String,array 定义字段验证类型,比如:email, url等等。可用值有: 1).一个有效类型字符串运用一个验证规则。2).一个有效类型数组运用多个验证规则。(多验证规则验证一个字段在1.3.2或更高版本中才可以使用)
    delay number 延迟到最后验证输入值
    missingMessage string 文本框未填写时出现的提示信息
    invalidMessage string 文本框的内容被验证无效时出现的提示
    tipPosition string 文本框内容无效的时候提示消息显示的位置 left、right
    deltax number 提示框在水平方向上位移
    novalidate boolean 为true时关闭验证功能

    事件

    事件名 参数 含义
    onBeforeValidate none 在验证一个字段之前触发
    onValidate valid 在验证一个字段的时候触发

    方法

    方法名 属性 含义
    destroy none 移除并销毁组件
    validate none 验证文本框的内容是否有效
    isValid none 调用validate方法并且返回验证结果,true/false
    enableValidation none 启用验证
    disableValidation none 禁用验证

    已实现的规则

    • email:匹配E-Mail的正则表达式规则。
    • url:匹配URL的正则表达式规则。
    • length[0,100]:允许在x到x之间个字符。
    • remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true。

    自定义规则

    定义一个最小长度(minLength)的自定义验证

        $.extend($.fn.validatebox.defaults.rules, {    
        minLength: {    
            validator: function(value, param){    
                return value.length >= param[0];    
            },    
            message: 'Please enter at least {0} characters.'   
        }    
    });
    

    定义一个比较两个值是否相等(equalTo)的自定义验证

      $.extend($.fn.validatebox.defaults.rules, {
        /*必须和某个字段相等*/
          equalTo: {
              validator:function(value,param){
                  return $(param[0]).val() == value;
              },
              message:'字段不匹配'
          }
    
        });
    

    定义的js之后 直接在页面上调用这个方法

    <input class="easyui-validatebox" data-options="validType:'minLength[5]'">  
    
    <input type="password" class="easyui-textbox" id="repassword" name="repassword" required="required"                 validType="equalTo['#password']"/>
    

    相关文章

      网友评论

        本文标题:ValidateBox(验证框)

        本文链接:https://www.haomeiwen.com/subject/vgzydttx.html