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

  • 相关阅读:
    Scoop Windows 的命令行安装程序管理工具
    微信小程序:用 Promise 解决方案代替回调地狱。 修复 this._invokeMethod is not a function 的问题
    微信小程序 获取地理位置信息
    Vue 与 动态组件 import 的尝试
    exception: TypeError: Cannot read property '_modulesNamespaceMap' of undefined at getModuleByNamespac
    Vue 项目中断点没有跳转到指定源码的问题
    检查 chrome 插件是否存在
    vue-devtools 获取到 vuex store 和 Vue 实例的?
    HTML5的服务器EventSource(server-sent event)发送事件
    ps 渐进式图片的技巧(支持jpg,gif,png)
  • 原文地址:https://www.cnblogs.com/kingfly/p/4126661.html
Copyright © 2011-2022 走看看