使用Jquery Validate时校验失败,但提交成功的问题

转自http://www.cnblogs.com/zixiaopiaomiao/p/5718089.html

在之前的项目中,我要对html页面进行校验,就从网上查到有个很方便的工具--Jquery Vaildate,自身带有校验提示,也可以自己进行设置。

下面是我写的代码,由于项目中有关于手机号码的校验,所以需要额外的进行添加。

  接下来我对其中几个比较重要的地方做一下解释:

1.rules:是校验规则,可以自己进行设置,如果没有则自动默认为Jquery Validate默认提供的规则。

2.message:是提示信息,如果用户输入与规则不符,则会进行提示,提示信息可以自己设置也可以使用Jquery Validate默认提供的警示信息。

3.SubmitHandler:这是我的问题所在,因为Jquery Vaildate 默认的是from表单信息提交,而我在html里面使用的是onclick事件,进行ajax跨域提交,所以没有进行提交校验。

         这里我请教经理做的模拟表单提交,具体看代码。

4.required:是非空提示,默认为true,需要在<input> 里面进行添加。

5.tips: 提示信息出现的位置是默认跟在文本框后面的,

6.提示信息的颜色可以在js自行进行设定

7.更加具体的应用可以参考网址:http://www.cnblogs.com/weiqt/articles/2013800.html

    $("#sendform").bind("click", 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));
            }, "请正确填写您的手机号码");
            var icon = "<i class='fa fa-times-circle'></i> ";
            $("#userform").validate({
                rules: {
                    UserCode: "required",

                    Pwd: {
                        required: true,
                        minlength: 5
                    },
                    rpwd: {
                        required: true,
                        minlength: 5,
                        equalTo: "#Pwd"
                    },
                    RoleId: {
                        required: true,

                    },
                    RealName: "required",
                    Tel: {
                        required: true,
                        isMobile: true
                    }
                }, submitHandler: function (form) {
                    var formdata = $("form").serialize();
                    formdata += "&id=" + id + "";
                    $.post(ajaxurl + "?fun=" + fun + "", formdata, function (data) {

                        if (data != "") {
                            if (data == 1) {
                                parent.$('#layerval').val("1");//判断提交 取消标识
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            } else {
                                layer.alert(data);
                            }
                        }
                        else {
                            layer.alert("服务器连接失败!请联系管理员!");
                        }
                    });

                },
                messages: {
                    UserCode: {
                        required: icon + "请输入您的用户名",
                        minlength: icon + "用户名必须两个字符以上"
                    },
                    Pwd: {
                        required: icon + "请输入您的密码",
                        minlength: icon + "密码必须5个字符以上"
                    },
                    rpwd: {
                        required: icon + "请再次输入密码",
                        minlength: icon + "密码必须5个字符以上",
                        equalTo: icon + "两次输入的密码不一致"
                    },
                    RoleId: icon + "请选择用户角色",
                    RealName: icon + "请输入真实姓名",
                    Tel: {
                        required: icon + "请输入用户电话",
                        isMobile: "请正确填写您的手机号码"
                    }

                }
            })



        })

 

posted @ 2017-10-26 09:41  枫炎  阅读(503)  评论(0编辑  收藏  举报