jQuery插件验证

最新推荐文章于 2022-11-27 20:12:49 发布

秋也呀

最新推荐文章于 2022-11-27 20:12:49 发布

阅读量169

点赞数

分类专栏： MVC 笔记

本文链接：https://blog.csdn.net/weixin_46230055/article/details/118075228

版权

JQuery Validate ASP.NET MVC 表单验证 JavaScript 用户体验

关键词由CSDN通过智能技术生成

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

MVC

21 篇文章 0 订阅

订阅专栏

一、前言

在必填验证和比较验证中代码虽然简单，但是代码量多，然而，JQuery的Validate插件封装了常用的表单验证规则，这个插件可以简化表单验证。

二、视图代码

<body>
    <div>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post,new { id="reginsterFrm"}))
        {
            <span>用户名：@Html.TextBox("uname")</span><br/>
            <span>密码：@Html.TextBox("pwd")</span><br />
            <span>确认密码：@Html.TextBox("repwd")</span><br />
            <span><input type="submit"  value="提交" /></span>
        }
    </div>
    //js文件一定要按顺序引入！！！
    <script src="~/Content/jquery.min.js"></script>
    <script src="~/Content/jquery.validate.min.js"></script>
    <script src="~/Content/jquery.validate.unobtrusive.min.js"></script>
    <script>
        $(function () {
            $("#reginsterFrm").validate({
                rules: {
                    uname: { required: true },
                    pwd: { required: true },
                    repwd: { required: true,equalTo:"#pwd"}//确认密码非空，两次密码一致
            },
                messages: {
                    uname: { required: "请输入用户名" },
                    pwd: { required: "密码不能为空" },
                    repwd: {required:"确认密码不能为空",equalTo:"两次密码不一致"}
                }
            });
        });
    </script>
</body>

三、运行结果

没输入全部值时提交

在这里插入图片描述
两次密码验证

成功提交

秋也呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件验证

一、前言示例：在必填验证和比较验证中代码虽然简单，但是代码量多，然而，JQuery的Vakidate插件封装了常用的表单验证规则，这个插件可以简化表单验证。二、视图代码<body> <div> @using (Html.BeginForm("Index", "Home", FormMethod.Post,new { id="reginsterFrm"})) { <span>用户名：@Html.TextB
复制链接

扫一扫

专栏目录