.NET MVC第七章、jQuery插件验证

红目香薰

发布于 2022-11-30 19:21:36

1.2K0

发布于 2022-11-30 19:21:36

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

.NET MVC第七章、jQuery插件验证

环境引入

基础jQuery，这个在MVC项目内是自带的。

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

验证js，MVC里是没有默认引入的，需要人为的主动引入。

<script src="~/Scripts/jQuery.validate.js"></script>
<script src="~/Scripts/jQuery.metadata.js"></script>
<script src="~/Scripts/jQuery.validate.messages_cn.js"></script>

如果是VS2019需要引入一下几个包

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

如果是VS2019在创建的过程中自带这些内容，VS2017则会少一些，例如jQuery是1.0版本的，也会有验证功能的js。

MVC使用script脚本

MVC中由于母版页中已经引入了jQuery故而直接使用即可，但是这里需要使用@section Scripts来写入script的脚本信息。

@section Scripts{
    <script type="text/javascript">
    </script>
}

示例

视图层

@{
    ViewBag.Title = "Index";
}

<h2>jQuery验证</h2>
<hr />
<form action="~/Test/Index" method="get" id="form_test">
    <p>
        用户名：<input type="text" name="userName" placeholder="请输入用户名" />
    </p>
    <p>
        密码：<input type="text" name="pwd1" id="pwd1" placeholder="请输入用户密码" />
    </p>
    <p>
        确认密码：<input type="text" name="pwd2" placeholder="请输入用户密码" />
    </p>
    <input type="submit" value="提交" />
</form>
@ViewBag.Info
@section Scripts{
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#form_test").validate({
                rules: {
                    userName: { required: true },// 用户名非空
                    pwd1: { required: true },// 密码非空
                    pwd2: { required: true, equalTo: "#pwd1" }// 确认密码非空,是否和密码一致
                }, messages: {
                    userName: { required: "请输入用户名！！" },
                    pwd1: { required: "请输入密码！" },
                    pwd2: {
                        required: "请输入确认密码！",
                        equalTo: "两次密码输入的不一致！"
                    },
                }
            });
        });
    </script>
}

控制器

public ActionResult Index(string userName,string pwd1)
{
    ViewBag.userName = userName;
    ViewBag.pwd = pwd1;
    ViewBag.Info = userName + ":" + pwd1;
    return View();
}

效果

所有信息不允许为空

两次密码不同

正确输入

提交成功

可复制使用案例

为了让表单结构简单而清晰，我们将表单的每个元素都包裹在一个div结构中：用label标签用来标记元素的名称，接着便是表单元素本身。注明： 1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时，浏览器就会自动将焦点转到和label相关的表单控件上。 2.每个需要校验的表单元素都应该设置id和name属性，方便在使用插件时将元素绑定校验规则和校验信息。】

源码

@{
    ViewBag.Title = "Index";
}
<h2>jQuery验证</h2>
<hr />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jquery validate验证</title>
    @section Scripts{
        <script src="~/Scripts/jquery.validate.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script type="text/javascript">
            $(function () {

                //让当前表单调用validate方法，实现表单验证功能
                $("#ff").validate({
                    debug: true, //调试模式，即使验证成功也不会跳转到目标页面
                    rules: { //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
                        sname: {
                            required: true, //必填。如果验证方法不需要参数，则配置为true
                            rangelength: [4, 12],
                            remote: {
                                url: "ajax_check.action",
                                type: "post"
                            }
                        },
                        spass: {
                            required: true,
                            rangelength: [6, 16]
                        },
                        spass2: {
                            required: true,
                            equalTo: '#password' //表示和id="spass"的值相同
                        },
                        saddress: {
                            required: true
                        },
                        sphone: {
                            required: true,
                            phone: true
                        },
                        slike: {
                            required: true,
                        },
                        semail: {
                            required: true,
                            email: true
                        },
                        simage: {
                            required: true,
                            extension: 'gif|jpe?g|png'
                        }
                    },
                    messages: {
                        sname: {
                            required: "请输入用户名",
                            rangelength: $.validator.format("用户名长度为{0}-{1}个字符"),
                            remote: "该用户名已存在！"
                        },
                        spass: {
                            required: "请输入密码",
                            rangelength: $.validator.format("密码长度为{0}-{1}个字符")
                        },
                        spass2: {
                            required: "请再次输入密码",
                            equalTo: "两次密码必须一致" //表示和id="spass"的值相同
                        },
                        sphone: {
                            required: "请输入手机号"
                        },
                        saddress: {
                            required: "请选择地址"
                        },
                        slike: {
                            required: "请选择爱好",
                        },
                        semail: {
                            required: "请填写邮件",
                            email: "邮箱格式不正确"
                        },
                        simage: {
                            required: "请选择要上传的头像",
                            extension: "文件后缀名必须为jpg,jpeg,gif,png"
                        }
                    }
                });
            });
        </script>
        }
    </head>

<body>
    <form action="http://www.hao123.com" method="post" id="ff">
        <fieldset>
            <legend>jQuery-Validate表单校验验证</legend>
            <div class="item">
                <label for="username" class="item-label">用户名:</label>
                <input type="text" id="username" name="sname" class="item-text" placeholder="设置用户名"
                       autocomplete="off" tip="请输入用户名">
            </div>
            <div class="item">
                <label for="password" class="item-label">密码:</label>
                <input type="password" id="password" name="spass" class="item-text"
                       placeholder="设置密码" tip="长度为6-16个字符">
            </div>
            <div class="item">
                <label for="password" class="item-label">确认密码:</label>
                <input type="password" name="spass2" class="item-text" placeholder="设置确认密码">
            </div>
            <div class="item">
                <label for="phone" class="item-label">手机号码:</label>
                <input type="text" id="phone" name="sphone" class="item-text" placeholder="输入手机号码" tip="请输入手机号码">
            </div>
            <div class="item">
                <label for="saddress" class="item-label">所在地:</label>
                <select name="saddress" class="item-select">
                    <option value="">---请选择---</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                </select>
            </div>
            <div class="item">
                <label for="slike" class="item-label">爱好：</label>
                上网：<input type="checkbox" name="slike" value="上网" />
                唱歌：<input type="checkbox" name="slike" value="唱歌" />
                编程：<input type="checkbox" name="slike" value="编程" />
                书法：<input type="checkbox" name="slike" value="书法" /><br />
            </div>
            <div class="item">
                <label for="semail" class="item-label">邮箱:</label>
                <input type="text" id="semail" name="semail" class="item-text" placeholder="设置邮箱"
                       autocomplete="off" tip="请输入邮箱">
            </div>
            <div class="item">
                <label for="simage" class="item-label">头像:</label>
                <input type="file" name="simage" class="item-file">
            </div>
            <div class="item">
                <input type="submit" value="提交" class="item-submit">
            </div>
        </fieldset>
    </form>
</body>
</html>

注：

jQuery1.9之后的版本把所有在早期版本里标记为deprecated的api都正式删除了，不再向后兼容。所以使用MVC模板自动生成的jQuery-3.3.1.min.js时会报脚本错，导致无法完成验证。 Visual Studio 2019中生成的mvc项目中，自动生成的jQuery-3.4.1.min.js已解决该问题。建议使用最新版本。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-09-30，如有侵权请联系 cloudcommunity@tencent.com 删除

mvc