MVC jQuery表单验证

最新推荐文章于 2023-02-02 11:41:39 发布

Vincy.Zhang

最新推荐文章于 2023-02-02 11:41:39 发布

阅读量287

点赞数

分类专栏： ASP.NET MVC jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43041350/article/details/119672105

版权

ASP.NET MVC 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

jQuery表单验证

前言:
数据验证分为客户端验证和服务端验证，或两种方式相结合。在客户端验证会减少服务器端的工作量。
作用：
从数据验证的作用角度来说，数据验证起到很重要的作用，如防止漏洞注入，防止网络攻击，确保数据安全，确保数据合理性，防止垃圾数据等作用
分类：
从数据验证的种类来说，一般分为第三方验证，比如我们用jQuery写好验证插件，在客户端用ajax验证和基于点内的mvc框架的数据验证

jQuery，

客户端脚本验证技术（在用户电脑上完成）

表单验证，大致可以分为以下五种类型：

必填检查（非空）
范围检查（符合某个范围）
比较验证（再次输入密码）
格式验证（邮箱，日期）
特殊验证（开发实际需求）

举例，注册账户的新密码表单验证：
方法1，手写前端html代码：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

    function checkform() {
        if (checkpwd1() && checkpwd2() && checkuser()) {
            $("#ErrorMsd").html("886");
            return true;
        }
        else {
            $("#ErrorMsd").html("请完善信息");
            return false;
        }
    }

    function checkuser() {
        if ($("#uname").val() == "") {
            $("#ErrorMsg").html("用户名不能为空！");
            $("#uname").focus();
            return false;
        }
        else {
            $("#ErrorMsd").html("ok");
            return true;
        }
    }
    function checkpwd1() {
        if ($("#pwd1").val() == "") {
            $("#ErrorMsg1").html("不能为空！");
            $("#pwd1").focus();
            return false;
        }
        else {
            $("#ErrorMsd1").html("ok");
            return true;
        }
    }
    function checkpwd2() {
        if ($("#pwd2").val() == "") {
            $("#ErrorMsg2").html("不能为空！");
            $("#pwd2").focus();
            return false;
        }
        else {
            $("#ErrorMsd2").html("ok");
            return true;
        }
    }
</script>


<html>
<head>
    <title></title>
</head>
<body>
    @using (Html.BeginForm("index", "home", FormMethod.Post))
    {
        <table>
            <tr>
                <td>用户名：</td>
                <td>@Html.TextBox("uname","",new { onblur = "checkuser()"})</td>
                <td><span id="ErrorMsg" style="color:deeppink"></span></td>
            </tr>
            <tr>
                <td>Newpwd：</td>
                <td>@Html.TextBox("pwd1", "", new { onblur = "checkpwd1()" })</td>
                <td><span id="ErrorMsg1" style="color:deeppink"></span></td>
            </tr>
            <tr>
                <td>Confirm pwd：</td>
                <td>@Html.TextBox("pwd2", "", new { onblur = "checkpwd2()" })</td>
                <td><span id="ErrorMsg2" style="color:deeppink"></span></td>
            </tr>
        </table>
        <input type="submit" value="提交" class="btn btn-primary" onclick="checkform()"/>
    }
</body>
</html>

方法2，使用jQuery的Validate插件
1.引入插件
2.前端Html代码：

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.metadata.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $("表单ID").validate({
            rules: {
                uname: { required: true },//非空
                upwd1: { required: true },//非空
                upwd2: { required: true, equalTo:"#upwd1" }//确认密码非空，是否和上次输入一致
            }, messages: {
                uname: { required: "请输入用户名！" },//非空
                upwd1: { required: "请输入密码" },//非空
                upwd2: {
                    required: "确认密码：",
                    equalTo: "#不一致！"
                }
            }
        })
    })
</script>

Vincy.Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MVC jQuery表单验证

jQuery表单验证jQuery，客户端脚本验证技术（在用户电脑上完成）表单验证，大致可以分为以下五种类型：必填检查（非空）范围检查（符合某个范围）比较验证（再次输入密码）格式验证（邮箱，日期）特殊验证（开发实际需求）举例，注册账户的新密码表单验证：方法1，手写前端html代码：<script src="~/Scripts/jquery-1.10.2.min.js"></script><script> function check
复制链接

扫一扫

专栏目录