0
0

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

.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已解决该问题。建议使用最新版本。

标签： jquery javascript 前端
本文转载自: https://blog.csdn.net/feng8403000/article/details/127127103
版权归原作者 红目香薰 所有， 如有侵权，请联系我们删除。
登录后发布评论

“.NET MVC第七章、jQuery插件验证”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

249基于java ssm springboot安全生产培训管理系统学习课件（源码+文档+运行视频+讲解视频）

【Linux庖丁解牛】—软件安装&vim！

【花雕学编程】Arduino LVGL 之在不同平台创建相同的用户界面

基于电商大数据的商品推荐系统

UE5.4像素流及前端接入

Unity中接入讯飞语音（实时语音转写）WebAPI（非SDK）

springboot实现获取客户端IP地址

文章导航