Form表单验证总结

参考资料：

1. ASP.NET MVC 表单验证方式总结

2. ASP.NET MVC Jquery Validate 表单验证的多种方式

自己总结如下：

一：绑定参数的表单Html.BeginForm表单验证

这种是非异步提交。

引用jquery.validate.min.js文件，用里面的valid()函数来判断，代码如下：

@model Apps.Models.Sys.SysSampleModel
@using Apps.Models.Sys;
@using Apps.Core;
@using Apps.Locale;
@{
    ViewBag.Title = "新增";
    Layout = "~/Views/Shared/_Index_LayoutEdit.cshtml";
}

<script type="text/javascript">
    $(function () {
        $("#btnSave").click(function () {
          
            if ($("#CreateForm").valid()) {
                $.ajax({
                    url: "/SysSample/Create",
                    type: "Post",
                    data: $("#CreateForm").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data == 1) {
                            window.parent.frameReturnByMes("成功");
                            window.parent.frameReturnByReload(true);
                            window.parent.frameReturnByClose()
                        }
                        else {
                            window.parent.frameReturnByMes("失败");
                        }
                    }
                });
            } else {
                alert("验证不通过！");
            } 
        });
    });
</script>


<div class="mvctool bgb">
    <a id="btnSave" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-save" style="padding-left: 20px;">保存</span></span></a>
</div>
@using (Html.BeginForm("Create", "SysSample", null, FormMethod.Post, new { Id = "CreateForm" }))
{
    @Html.ValidationSummary(true)
    <table class="fromEditTable setTextWidth300">
        <tbody>
            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.Id)：
                </td>
                <td style="width:310px">
                    @Html.EditorFor(model => model.Id)
                </td>
                <td>@Html.ValidationMessageFor(model => model.Id)</td>
            </tr>
            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.Name)：
                </td>
                <td>
                    @Html.EditorFor(model => model.Name)
                </td>
                <td>
                    @Html.ValidationMessageFor(model => model.Name)
                </td>
            </tr>
            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.Age)：
                </td>

                <td>
                    @Html.EditorFor(model => model.Age)
                </td>
                <td>
                    @Html.ValidationMessageFor(model => model.Age)
                </td>
            </tr>
            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.Bir)：
                </td>

                <td>
                    @Html.TextBoxFor(model => model.Bir)
                </td>
                <td>
                    @Html.ValidationMessageFor(model => model.Bir)
                </td>
            </tr>

            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.Note)：
                </td>

                <td>
                    @Html.EditorFor(model => model.Note)
                </td>
                <td>
                    @Html.ValidationMessageFor(model => model.Note)
                </td>
            </tr>
            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.CreateTime)：

                </td>

                <td>
                    @Html.TextBoxFor(model => model.CreateTime)

                </td>
                <td>
                    @Html.ValidationMessageFor(model => model.CreateTime)
                </td>
            </tr>
            <tr>
                <td style="width:100px; text-align:right;">
                    @Html.LabelFor(model => model.Photo)：
                </td>
                <td>
                    @Html.TextBoxFor(model => model.Photo)

                </td>

                <td>
                    @Html.ValidationMessageFor(model => model.Photo)
                </td>
            </tr>
        </tbody>
    </table>
}
View Code

二：Ajax.BeginForm表单验证

这种是异步提交

@model WebApplication8.Models.UserModel

@{
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>

    <script type="text/javascript">
        $(function () {
            // 表单验证
            formValidate();

        });

        var formValidate = function () {
            // 添加自定义校验（邮政编码验证）
            //jQuery.validator.addMethod("isZipCode", function (value, element) {
            //    var zipCode = /^[0-9]{6}$/;
            //    return this.optional(element) || (zipCode.test(value));

            //}, "请正确填写您的邮政编码");

            $("#addForm").validate({  // #JQForm是form表单的ID
                rules: {
                    UserName: {  // 要验证的表单的id
                        required: true, // 是否是必填项
                        minlength: 2,  // 最小长度
                        //remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
                    },
                    AddRess: {
                        required: true,
                        range: [18, 30]
                    },
                    //txtZipCode: {
                    //    required: true,
                    //    isZipCode: true,
                    //},
                },
                messages: {// 如果没有给属性错误提示，就会用默认提示
                    UserName: {
                        required: "请输入会员名称",  // 如果提交的时候没有填写提示的文字
                        minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
                        remote: "用户名重复"

                    },
                    AddRess: {
                        required: "年龄不能为空",
                        range: "年龄范围是18~30"

                    },
                    //txtZipCode: {
                    //    required: "邮政编码不能为空",

                    //},

                },
                errorPlacement: function (error, element) { // 自定义错误信息放置的位置
                    error.appendTo(element.next("span"));

                },
            })
        };

        // 非submit按钮提交方式
        var btnSubmit = function () {
            // 检测表单是否验证通过 并进行表单验证
            var validateState = $("#addForm").valid();
            if (!validateState) {
                return false;
            }

            // 往后台提交数据，当然还可以传入其他你想提交的数据
            $.ajax({
                url: "/Home/JQValidate",
                type: "post",
                dataType: "json",
                data: $("#addForm").serialize(),//{ txtName: 1 }
                success: function (data) {
                    $("#txtName").val(data.UserName);
                }
            });
        };
    </script>
</head>
<body>
    @using (Ajax.BeginForm("JQValidate", "Home", new { }, new AjaxOptions() { HttpMethod = "post", OnBegin = "ajaxFormOnBegin", OnSuccess = "afterOnSuccess", OnFailure = "afterOnFailure", UpdateTargetId = "UpdateTargetHiddenID" }, new { @id = "addForm" }))
    {
        <div>
            姓名：
            <input type="text" name="UserName" id="UserName" />
            <span class="errorMsg"></span>
            <br />
            年龄：
            <input type="text" name="AddRess"  id="AddRess"/>
            <span class="errorMsg"></span>
            @*<br />
            邮政编码：
            <input type="text" name="txtZipCode" />
            <span class="errorMsg"></span>*@
        </div>
        <input type="button" value="提交1" onclick="javascript:btnSubmit();" />
    }
  
</body>
</html>
View Code

但是<input type="submit"  />按钮是submit怎么验证还有待研究。

三：非Form表单提交验证

@model WebApplication8.Models.UserModel

@{
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>

    <script type="text/javascript">
        $(function () {
            // 表单验证
            formValidate();

        });

        var formValidate = function () {
            // 添加自定义校验（邮政编码验证）
            //jQuery.validator.addMethod("isZipCode", function (value, element) {
            //    var zipCode = /^[0-9]{6}$/;
            //    return this.optional(element) || (zipCode.test(value));

            //}, "请正确填写您的邮政编码");

            $("#addForm").validate({  // #JQForm是form表单的ID
                rules: {
                    UserName: {  // 要验证的表单的id
                        required: true, // 是否是必填项
                        minlength: 2,  // 最小长度
                        //remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息
                    },
                    AddRess: {
                        required: true,
                        range: [18, 30]
                    },
                    //txtZipCode: {
                    //    required: true,
                    //    isZipCode: true,
                    //},
                },
                messages: {// 如果没有给属性错误提示，就会用默认提示
                    UserName: {
                        required: "请输入会员名称",  // 如果提交的时候没有填写提示的文字
                        minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
                        remote: "用户名重复"

                    },
                    AddRess: {
                        required: "年龄不能为空",
                        range: "年龄范围是18~30"

                    },
                    //txtZipCode: {
                    //    required: "邮政编码不能为空",

                    //},

                },
                errorPlacement: function (error, element) { // 自定义错误信息放置的位置
                    error.appendTo(element.next("span"));

                },
            })
        };

        // 非submit按钮提交方式
        var btnSubmit = function () {
            // 检测表单是否验证通过 并进行表单验证
            var validateState = $("#addForm").valid();
            if (!validateState) {
                return false;
            }

            // 往后台提交数据，当然还可以传入其他你想提交的数据
            $.ajax({
                url: "/Home/Edit",
                type: "post",
                dataType: "json",
                data: $("#addForm").serialize(),//{ txtName: 1 }
                success: function (data) {
                    $("#txtName").val(data.UserName);
                }
            });
        };
    </script>
</head>
<body>
    <form id="addForm">
        <div>
            姓名：
            <input type="text" name="UserName" id="UserName" />
            <span class="errorMsg"></span>
            <br />
            年龄：
            <input type="text" name="AddRess" id="AddRess" />
            <span class="errorMsg"></span>
            <br />
            @*邮政编码：
                <input type="text" name="txtZipCode" />
                <span class="errorMsg"></span>*@
        </div>
        <div>
            <input type="button" value="提交" onclick="javascript: btnSubmit();" />
        </div>
    </form>
</body>
</html>
View Code

 

 

posted @ 2017-06-21 17:48  Dukezhou  阅读(237)  评论(0)    收藏  举报