zoukankan      html  css  js  c++  java
  • Nice Jquery Validator 自定义规则

    规则定义方式

    (1). 正则

    适用于使用单个正则能搞定的验证。

    // 使用数组包裹正则和错误消息,规则不通过时提示该消息
    mobile: [/^1[3458]d{9}$/, '请检查手机号格式']
    // 或者,直接定义正则,需要另外定义错误消息,否则提示默认消息
    mobile: /^1[3458]d{9}$/

    (2). 函数

    函数方式具有最大的灵活性,搞定任何验证。不同返回值,导致不同验证结果:

    返回值结果描述
    return undefined(无返回)   不影响验证结果不提示消息(继续验证下一个规则)
    return null   忽略本次验证(跳过该字段的验证,如果已经显示了消息将会自动隐藏)
    return true √通过  
    return false ×不通过  
    return "" √通过  
    return "错误消息" ×不通过 提示“错误消息”
    return {"ok": "正确"} √通过 提示“正确”
    return {"error": "错误消息"} ×不通过 提示“错误消息”
    return $.ajax()   ajax验证,等待服务器返回验证结果

    例1:自定义规则,如果通过返回true,否则返回错误消息

     mobile: function(element, params) {

        return /^1[3458]d{9}$/.test(element.value) || '请检查手机号格式';
    }

    例2:使用内置的 .test() 方法检测是否符合某个规则
    loginName: function(element) {
        return /^[a-zA-Z]w{3,}/.test(element.value) ||
            this.test(element, "mobile")===true ||
            this.test(element, "email")===true ||
            '请填写用户名、手机号或者邮箱';
    }

    例3:自定义 ajax 验证
    // 你只需要将 $.ajax 返回,并且保证 response 符合上面的返回值说明,其他的插件都会自动处理。
    // 当然,你也可以加上 success 回调做点别的,或者自己加上自定义 header

    myRemote: function(element){
        return $.ajax({
            url: 'check/username.php',
            type: 'post',
            data: element.name +'='+ element.value,
            dataType: 'json'
        });
    }


    例4:无返回值,对验证结果没有影响
    passwordStrength: function() {
        // 密码强度验证 和 UI处理
    }


    例5:动态跳过当前字段的验证
    myRule: function() {
        if (foo) {
            return "Error Message"
        }
        // 跳过验证(当前规则之后的所有规则都不被验证)
        else (bar) {
            return null
        }
    }


    规则作用范围

    (1). 全局

    使用 $.validator.config(),建议配置在 local 配置文件(如:zh-CN.js)中
    任何实例,任何字段都能访问到该规则

    $.validator.config(
        rules: {
            mobile: [/^1[3-9]d{9}$/, "请填写有效的手机号"],
            chinese: [/^[u0391-uFFE5]+$/, "请填写中文字符"]
        }
    );

    (2). 当前实例

    在调用初始化验证的时候传参,只对调用时的实例有效

    $("#myForm").validator(
        rules: {
            mobile: [/^1[3-9]d{9}$/, "请填写有效的手机号"],
            chinese: [/^[u0391-uFFE5]+$/, "请填写中文字符"]
        }
    );


    (3). 当前字段

    只能通过 DOM 方式在表单元素上定义

    <input name="demo" data-rule="required;xxx" data-rule-xxx="[/^d{6}$/, '请输入6位数字']">


     
     
  • 相关阅读:
    nginx socket转发设置
    Linux CentOS 7 安装字体库 & 中文字体
    nginx配置location总结及rewrite规则写法
    nginx动静分离小示例
    iptables黑/白名单设置(使用ipset 工具)
    Docker logs 命令
    Docker定制容器镜像(利用Dockerfile文件)
    docker swarn集群笔记
    [国家集训队]数颜色 / 维护队列(带修莫队)
    于是他错误的点名开始了(trie树)
  • 原文地址:https://www.cnblogs.com/feixiablog/p/8990709.html
Copyright © 2011-2022 走看看