jquery.validate没有验证通过就去后台了

时间:2022-12-04 13:52:16
下面是对两个文本框的验证,在MVC里是正常的。没有验证通过,到不了后台。
但放到WebForm里面,虽然会有提示,但还是进了后台去了,非常奇怪!!!


1.前台:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.validate.js"></script>
    <script>
        //编辑标签
        function edit_info() {
            debugger
            $.ajax({
                type: "POST",
                async: false,
                url: "WebForm1.aspx/EditLabel",
                contentType: "application/json; charset=utf-8",
                dataType: "json",            
                success: function (result, status) {
                    debugger
                    if (status == "success") {
                        if (result.d >= 0) {
                            alert("添加成功");
                            window.location = "WebForm1.aspx"
                        }
                        else {
                            alert("添加失败");
                        }
                    }
                },
                error: function (err) {
                    alert("操作失败!");
                }
            })

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
       <div class="modal-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-md-2 control-label"> ID:</label>
                            <div class="col-md-8"><label id="txtLabelID" class="control-label"></label></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">  款号:</label>
                            <div class="col-md-8"><input type="text" id="txtModel" class="form-control" name="txtModel" /></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">  标签:</label>
                            <div class="col-md-8"><input type="text" id="txtLabel" class="form-control" name="txtLabel" /></div>
                        </div>
                    </div>
                </div>
            </div>

            <input type="submit" onclick="edit_info()"  id="act" value="add" name="act" />
        </div>
    </form>

        <script>
    $("#form1").validate({
        rules: {
            txtModel: {
                required: true,
                rangelength: [2, 10]
            },
            txtLabel: {
                required: true,
                rangelength: [2, 10]
            }
        },
        messages: {
            txtModel:
            {
                required: "*必须输入款式",
                rangelength: "长度2-10之间的汉字或字母"
            },
            txtLabel: {
                required: "*必须输入标签",
                rangelength: "长度2-10之间的汉字或字母"
            },

        }
    })
    </script>
</body>
</html>


2.后台
 [WebMethod]
        public static void EditLabel()
        {

        }

6 个解决方案

#1


控件注释掉,逐个调试吧,不要一下子都弄出来

#2


jquery.validate.js会检测,但不会自动阻止提交,你在提交前需要判断一次

#3


就二个控件啊,大哥

#4


怎么判断?
为什么MVC项目中没有判断的动作,如果没有通过前端验证就去不了后台?

#5


MVC默认的form提交,会触发submit事件,你这是手工做了AJAX提交,form事件不会触发的

#6


稍微修改了一下源码
修改提交按钮

<!--<input type="submit" onclick="edit_info()"  id="act" value="add" name="act" />-->
<input type="submit" id="act" value="add" name="act" />

修改验证表单提交的调用方式(位置)

<script>
$("#form1").validate({
rules: {
txtModel: {
required: true,
rangelength: [2, 10]
},
txtLabel: {
required: true,
rangelength: [2, 10]
}
},
messages: {
txtModel: {
required: "*必须输入款式",
rangelength: "长度2-10之间的汉字或字母"
},
txtLabel: {
required: "*必须输入标签",
rangelength: "长度2-10之间的汉字或字母"
},

},
submitHandler: function(form) {
                                       //此处为表单验证通过后   才出发表单提交事件
edit_info();
}
})
</script>

附上教程:http://www.runoob.com/jquery/jquery-plugin-validate.html   中的                 用其他方式替代默认的 SUBMIT

#1


控件注释掉,逐个调试吧,不要一下子都弄出来

#2


jquery.validate.js会检测,但不会自动阻止提交,你在提交前需要判断一次

#3


就二个控件啊,大哥

#4


怎么判断?
为什么MVC项目中没有判断的动作,如果没有通过前端验证就去不了后台?

#5


MVC默认的form提交,会触发submit事件,你这是手工做了AJAX提交,form事件不会触发的

#6


稍微修改了一下源码
修改提交按钮

<!--<input type="submit" onclick="edit_info()"  id="act" value="add" name="act" />-->
<input type="submit" id="act" value="add" name="act" />

修改验证表单提交的调用方式(位置)

<script>
$("#form1").validate({
rules: {
txtModel: {
required: true,
rangelength: [2, 10]
},
txtLabel: {
required: true,
rangelength: [2, 10]
}
},
messages: {
txtModel: {
required: "*必须输入款式",
rangelength: "长度2-10之间的汉字或字母"
},
txtLabel: {
required: "*必须输入标签",
rangelength: "长度2-10之间的汉字或字母"
},

},
submitHandler: function(form) {
                                       //此处为表单验证通过后   才出发表单提交事件
edit_info();
}
})
</script>

附上教程:http://www.runoob.com/jquery/jquery-plugin-validate.html   中的                 用其他方式替代默认的 SUBMIT