表单验证（第五章）<原创内容>

一、Jquery验证（简单代码的验证）

 

 

@{
    Layout = null;
    ViewBag.Title = "JQueryText";
}

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("form").bind("submit", checkForm);
    })

    function CheckedUserName() {
        if ($("#userName").val() == "") {
            $("#userNameMessage").html("用户名不能为空！");
            $("#userName").focus();
            return false;

        } else {
            $("#userNameMessage").html("");
        }
        return true;
    }

    function CheckUserPassword01IsNull() {
        if ($("#userPassword01").val() == "") {
            $("#userPassword01Message").html("用户密码不能为空！");
            $("#userPassword01").focus();
            return false;
        } else {
            $("#userPassword01Message").html("");
        }
        return false;
    }


    function CheckUserPassword02IsRight() {
        if ($("#userPassword02").val() != $("#userPassword01").val()) {
            $("#userPassword02Message").html("您输入的两次密码不一致哦");
            $("#userPassword02").focus();
            return false;
        } else {
            $("#userPassword02Message").html("");
        }
        return true;
    }


    function checkForm() {
        if (CheckedUserName() && CheckUserPassword01IsNull() && CheckUserPassword02IsRight()) {
            return true;
        } else {
            return false;
        }
    }





</script>
@using (Html.BeginForm("JQueryText", "Demo", FormMethod.Post))
{
    <span>用户账号：</span>@Html.TextBox("userName", "", new { onblur = "CheckedUserName()" })
    <span id="userNameMessage" style="color:red;"></span>
    <br />

    <span>用户密码：</span>@Html.TextBox("userPassword01", "", new { onblur = "CheckUserPassword01IsNull()" })
    <span id="userPassword01Message" style="color:red;"></span>
    <br />

    <span>确认密码：</span>@Html.TextBox("userPassword02", "", new { onblur = "CheckUserPassword02IsRight()" })
    <span id="userPassword02Message" style="color:red;"></span>
    <br />

    <input type="submit" value="提交" />
}

 

 

 

 

 

 

 

二、Jquery验证（验证插件的使用）

@{
    Layout = null;
    ViewBag.Title = "JQuery的验证插件使用";
}

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
    $(function () {
        $("#regForm").validate({
            rules: {
                userName: { required: true },
                userPassword01: { required: true },
                userPassword02: { required: true, equalTo: "#userPassword01" }
            },
            messages: {
                userName: { required: "请输入用户账号" },
                userPassword01: { required: "用户密码不能为空！" },
                userPassword02: {
                    required: "确认密码不能为空！",
                    equalTo: "您输入的两次密码不一致"
                }
            }
        });
    });
</script>

@using (Html.BeginForm("JQueryText", "Demo", FormMethod.Post,new { id="regForm",name= "regForm"}))
{
    <span>用户账号：</span>@Html.TextBox("userName")
    <br />

    <span>用户密码：</span>@Html.TextBox("userPassword01")
    <br />

    <span>确认密码：</span>@Html.TextBox("userPassword02")
    <br />
    <input type="submit" value="提交" />
}

 

 

 

三、模型注解验证

1.Model处

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

//引入验证空间
using System.ComponentModel.DataAnnotations;

namespace Demo03.Models
{
    /// <summary>
    /// 个人信息页
    /// </summary>
    public class UserInfo
    {
        public UserInfo()
        {
        }

        public UserInfo(int userID, string userEmail, string userNikeName)
        {
            UserID = userID;
            UserEmail = userEmail;
            UserNikeName = userNikeName;
        }

        [Required(ErrorMessage = "用户编号不能为空！")]
        [Range(0, 8, ErrorMessage = "编号长度不合法！")]
        public int UserID { get; set; }

        [Required(ErrorMessage = "用户邮箱不能为空！")]
        [StringLength(10, ErrorMessage = "邮箱长度不合法！")]
        public string UserEmail { get; set; }

        [Required(ErrorMessage = "用户昵称不能为空！")]
        public string UserNikeName { get; set; }
        

    }
}

2.控制器内

 [HttpPost]
        public ActionResult ModelByValidate(UserInfo user)
        {
            ViewBag.userInfo = "用户编号：" + user.UserID + "，用户邮箱：" + user.UserEmail + "，用户昵称：" + user.UserNikeName;
            return View();
        }

3.视图内

@{
    Layout = null;
    ViewBag.Title = "ModelByValidate";
}

<h2>模型注解验证</h2>
@Html.BeginForm("ModelByValidate", "Demo", FormMethod.Post){ 
    用户编号：@Html.TextBox("userID")
    用户邮箱：@Html.TextBox("UserEmail")
    用户昵称：@Html.TextBox("UserNikeName")

<input type="submit" value="提交" />
<p>@Html.ValidationSummary()</p>
<p>@ViewBag.userInfo;</p>

}

4.运行结果

 四、JQuery验证结合模型注解验证相辅相成

　　在开发中，为了避免被禁用JS或网络攻击，所以使用JQuery验证，并结合模型注解验证是必须的（双层保障）；

　　1.Model处

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

//引入验证空间
using System.ComponentModel.DataAnnotations;

namespace Demo03.Models
{
    /// <summary>
    /// 个人信息页
    /// </summary>
    public class UserInfo
    {
        public UserInfo()
        {
        }

        public UserInfo(int userID, string userEmail, string userNikeName)
        {
            UserID = userID;
            UserEmail = userEmail;
            UserNikeName = userNikeName;
        }

        [Required(ErrorMessage = "用户编号不能为空！")]
        [Range(0, 8, ErrorMessage = "编号长度不合法！")]
        public int UserID { get; set; }

        [Required(ErrorMessage = "用户邮箱不能为空！")]      
        public string UserEmail { get; set; }

        [Required(ErrorMessage = "用户昵称不能为空！")]
        [StringLength(5, ErrorMessage = "昵称长度不合法！")]
        public string UserNikeName { get; set; }
        

    }
}

 

 

　　2.在视图中

@{
    Layout = null;
    ViewBag.Title = "ModelByValidate";
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
    $(function () {
        $("#TextByForm").validate({
            rules: {
                userID: { required: true },
                UserEmail: { required: true },
                UserNikeName: { required: true }
            },
            messages: {
                userID: { required: "用户编号不允许为空！" },
                UserEmail: { required: "用户邮箱不能为空！" },
                UserNikeName: { required: "用户昵称不能为空！" }
            }
        });
    });
</script>

<style>
    .error{
        color:red;
    }

    .field-validation-error {
        color: red;
    }
</style>

<h2>JQuery验证和模型注解相辅相成验证</h2>
@using (Html.BeginForm("ModelByValidate", "Demo", FormMethod.Post, new { id = "TextByForm", name = "TextByForm" }))
{
    <p>用户编号：@Html.TextBox("userID")@Html.ValidationMessage("userID")</p><br/>
    <p>用户邮箱：@Html.TextBox("UserEmail")@Html.ValidationMessage("UserEmail")</p><br/>
    <p>用户昵称：@Html.TextBox("UserNikeName")@Html.ValidationMessage("UserNikeName")</p>

    <input type="submit" value="提交" />
}
    @*<p>@Html.ValidationSummary()</p>
    <p>@ViewBag.userInfo</p>*@

 

运行...

 

 

 

 

 

“今日感悟：

坚持，再坚持！

　　　　　　　　　　　　　　　　　　  　　　----作者：黎哈哈”

 

原创内容，创作不易；

若能助你，请多支持！