validate ajax实现异步

版权声明: https://blog.csdn.net/qq_37185081/article/details/80337957

需要做的是一个注册功能:

    需要验证所有input中是否有值、值的长度

    验证手机号码,是否和正则一样,然后用ajax传到后台,看看手机号码有没有被注册,后台返回两个参数,一个是true、false一个是message

    点击提交时,把手机验证码中的值传到后台验证,并返回信息,暂时还没有接口,我就随便瞎做了下。

看代码:(有不严谨、错的地方,望指正)

$(document).ready(function() {
            jQuery.validator.addMethod("isMobile", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");
                $("#registForm").validate({
                    rules: {
                        validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"},
                        phone: {
                            required : true,
                            minlength : 11,
                            isMobile : true
                        },
                        password: {
                            required: true,
                            minlength: 6,
                            maxLength : 16

                        },
                        repassword: {
                            required: true,
                            minlength: 6,
                            equalTo: "#password"
                        },
                        number: {
                            required: true,
                            minlength: 4
                        }
                    },
                    messages: {
                        phone: {remote: "手机号输入不正确",required: "请填写手机号",minlength: "请输入11位手机号码"},
                        isMobile : "请正确填写您的手机号码",
                        password: {required: "请输入密码",minlength: "密码至少输入六位数",maxLength: "密码最多输入十六位数"},
                        repassword: {required: "请输入确认密码",minlength: "确认密码至少输入六位数",equalTo: "两次密码不相同"},
                        number: {required: "请输入手机验证码",minlength: "验证码请输入四位数"},
                        validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
                    },
                    errorLabelContainer: "#messageBox",
                    errorPlacement: function(error, element) {
                        error.appendTo($("#registerError").parent());
                    },
                    submitHandler:function (form) {  //这里是点击提交后的操作
                        var numberResult = $("#number").val();
                        $.ajax({
                            url: "${ctx}/register/regist/phoneCode",
                            type: "post",
                            datatype: "json",
                            data: {number:numberResult},
                            success:function(data){
                                if(data.result == "true"){
                                    alert("提交中");
                                    $("#numberSpan").text("");
                                    form.submit();//这里要注意,如果用$("form").submit();会死循环...
                                }else{
                                    $("#numberSpan").text("手机验证码错误");
                                }
                            },
                            error:function(){

                            }

                        });
                    }
                });

            $("#num").click(function(){//点击获取手机验证码
                var boolean = $("#registForm").validate().element($("#phone"));//只要验证输入手机号码的那一个input
                if(boolean){
                    var phoneResult = $("#phone").val();
                    $.ajax({
                        url: "${ctx}/register/regist/phoneValidate",
                        type: "post",
                        datatype: "json",
                        data: {phone:phoneResult},
                        success: function(data){
                            if(data.result=="true"){
                                $("#phoneSpan").text("");
                                alert("手机验证码:1234");

                            }else{
                                $("#phoneSpan").text(data.msg);
                            }
                        },
                        error:function(){
                            alert('请求出现错误...');
                        }
                    });
                }
            });
            $("#phone").focus(function(){
                    $("#phoneSpan").text("");
            });
            $("#number").focus(function(){
                $("#numberSpan").text("");
            });
        });

猜你喜欢

转载自blog.csdn.net/qq_37185081/article/details/80337957