对form表单进行校验

最新推荐文章于 2024-06-18 22:07:00 发布

猿帥

最新推荐文章于 2024-06-18 22:07:00 发布

阅读量859

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css jquery

本文链接：https://blog.csdn.net/han_shuai_/article/details/109767508

博客展示了使用jQuery进行表单验证和异步提交的代码。定义了手机号码和人员姓名的验证规则，对表单字段进行校验。当表单提交时，将数据序列化并通过AJAX异步发送到指定URL，根据返回结果给出保存成功或失败的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var userFormValidator;
jQuery.validator.addMethod("isPhone", function(value, element) {
    var length = value.length;
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "请填写正确的手机号码：11位数字");

jQuery.validator.addMethod("isName", function(value, element) {
    var phoneName = /^[\u4e00-\u9fa5]{2,10}$/;
    return this.optional(element) || ( phoneName.test(value));
}, "请正确填写人员姓名，2-10个汉字");

userFormValidator = $("#user_form").validate({
    // 定义校验规则
    rules: {
        name: {
            required: true,
            isName: true
        },
        phoneNumber: {
            isPhone:true
        }
    },
    messages: {
        name: {
            required: "请填写人员姓名"
        },
        phoneNumber: {
            required: "请填写手机号码"
        }
    },
    // 提交表单
    submitHandler: function (form) {
        //var params = new FormData(document.getElementById("user_form"));
        var params = $(form).serialize();
        // 异步保存
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: getRootPath() + "/map/manage/savePerson",
            data: params,
            success: function (result) {
                if (result.resultStat == "SUCCESS") {
                    //var mylay = parent.layer.getFrameIndex("userFormLayer");
                    // parent.layer.close(mylay);
                    layer.msg('保存成功！', {
                        time: 2000 //20s后自动关闭
                    });
                    closeLayer(true);
                } else {
                    layer.alert("保存失败");
                }
            },
            error: function (result) {
                layer.alert("保存失败，" + result.mess);
            }
        });
    }
});