zoukankan      html  css  js  c++  java
  • jQuery Validate验证方法及教程

    //实名认证 验证
    $(function(){
        
        //中文姓名验证
        jQuery.validator.addMethod("zh_verify", function(value, element) {
        var tel = /^[u4E00-u9FA5uf900-ufa2d]{2,10}$/;
        return this.optional(element) || (tel.test(value));    
        }, "请输入2~10个字的中文!");
        
        //身份证号验证
        jQuery.validator.addMethod("idcard_verify", function(value, element) {
        var idcard = /^(d{15}$|^d{18}$|^d{17}(d|X|x))$/;
        return this.optional(element) || (idcard.test(value));
        }, "请输入正确格式的身份证号!");
        
        //jquery.validate插件验证
        $("#nameauth").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: "",
            rules: {
                tname: {
                    required: true,
                    zh_verify:true
                },
                idcard: {
                    required: true,
                    idcard_verify:true
                },
                con_idcard: {
                    required: true,
                    equalTo: '.idcard'
                }
            },
            messages: {
                tname: {
                    required: "真实姓名不能为空!",
                    rangelength: "请输入2~18个中文!"
                },
                idcard: {
                    required: "身份证不能为空!",
                    rangelength: "请输入15~18个字符的身份证!"
                },
                con_idcard: {
                    required: "确认证号不能为空!",
                    equalTo: '确认证号与身份证号不一致!'
                }
            },
            errorLabelContainer: "#resultMsg",
            submitHandler:function() {
                //$(form).ajaxSubmit();    //同步提交FORM
                var tname = $('input[name=tname]').val();
                var idcard = $('input[name=idcard]').val();
                var resultMsg = $('#resultMsg');
                ajaxSubmitForm(tname, idcard, resultMsg);            
            }
        });
    })
    
    //异步执行方法
    function ajaxSubmitForm(tname, idcard, resultMsg) {
        $.ajax({
            url: "/member/nameauth",
            data: "tname=" + tname + "&idcard=" + idcard + "&con_idcard=" + idcard,
            type: "post",
            cache: false,
            dataType: "json",
            success: function(data, textStatus){
                if(data.return){
                    window.location.reload();    
                }else{
                    resultMsg.css({'color': 'red'}).html(data.errmsg).show().delay(2000).hide(0);
                }
            }
        });
    }

    或者

    $(function(){
        //jquery.validate插件自定义AJAX验证(验证账户是否存在)
        $.validator.addMethod("checkUserExist",function(value,element){
            var user = value;
            $.ajax({
                type:"POST",
                async:true, 
                dataType:'json',
                url:"/account/verifyAccount",
                data:"param=" + $('input[name=newpassword]').val(),
                success:function(response){
                    if(response){
                        res = response.state;
                    }
                }
            });
            return res;
        },"账号不存在,请仔细检查!");
        
        //jquery.validate插件验证
        $("#signupForm").validate({
            rules: {
                newpassword: {
                    required: true,
                    rangelength:[6,30]
                }
            },
            messages: {
                newpassword: {
                    required: "请输入6~30个字符的交易密码!",
                    rangelength: "请输入6~30个字符的交易密码!"
                }
            },
            submitHandler:function(form) {
                $(form).ajaxSubmit();
            }
        });
    })

    jQuery Validate教程

    http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

  • 相关阅读:
    MySQL:数据库优化,看这篇就够了
    不使用synchronized和lock,如何实现一个线程安全的单例
    理解Spring:IOC的原理及手动实现
    终于放弃了单调的swagger-ui了,选择了这款神器—knife4j
    TP5.0.24 验证器内置规则中max 如果输入中文 验证长度错误的问题
    laravel 5.5 api接口开发:JWT安装+实现API token 认证
    homestead 代码与本地代码不同步的解决方法
    laravel 5.5 api接口开发: 安装dingo/api
    php base_decode 函数将base64编码转换图片遇到的问题
    thinkphp 5.0 部署新网空间隐藏index.php入口
  • 原文地址:https://www.cnblogs.com/kingfly/p/4126661.html
Copyright © 2011-2022 走看看