视图表单验证

2022-04-27 14:32:43 阅读：156 来源： 互联网

标签：userName Index StemUsers 验证 Register 视图表单 pwd public

视图表单验证

初始化项目

新建一个ASP.NET MVC的项目

新建游戏用户类:

 public class StemUsers
    {
        public int id { get; set; }
        public string userName { get; set; }
        public string pwd { get; set; }
    }

创建一个BaseController

 public class BaseController : Controller
    {
        // GET: Base

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(StemUsers stemUsers)
        {
            StemUsers stemUsers1 = new StemUsers();
            stemUsers1.userName = Request["userName"];
            stemUsers1.pwd = Request["pwd"];
            List<StemUsers> list = new List<StemUsers>();
            list.Add(stemUsers1);
            ViewBag.add = list;
            return View();
        }
        public ActionResult Register()
        {
            return View();
        }
    }

视图Register和Index

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Register</title>
    @*引入样式*@
    <link rel="stylesheet" type="text/css" href="~/Content/logincss/Register.css" />
    @*引入jQuery*@
    <script src="~/Scripts/jquery-3.4.1.js"> </script>
</head>
<body>
    <div class="kdom">
        <div>
            <h1>注册界面</h1>
            <form action="Index" method="post" onsubmit="return tjyz()">
                用户名：<input type="text" name="userName" id="userName" onblur="yzyhm()" />
                       <span id="namets" class="tstext">*</span><br />
                密码：<input type="password" name="pwd" id="pwd" onblur="yzpwd()" />
                      <span id="pwdts" class="tstext"></span><br />
                确认密码：<input type="password" name="pwd2" id="pwd2" onblur="yzpwd2()" />
                        <span id="pwdts2" class="tstext"></span><br />
                <input type="submit" value="注册" />
            </form>
        </div>
        @*js*@
    <script>
        // 非空验证账号
        function yzyhm() {
            var username = $("#userName").val();
            if (username == "") {
                $("#namets").html("请输入账号");
                $("#namets").css("color", "red");
            } else {
                $("#namets").html("√");
                $("#namets").css("color", "green");
            }
        }
        function yzpwd() {
            var pwd = $("#pwd").val();
            if (pwd.length <3) {
                $("#pwdts").html("输入的字符应该在6-18");
                $("#pwdts").css("color", "red","font-size","15px");
            } else {
                $("#pwdts").html("√");
                $("#pwdts").css("color", "green","font-size", "15px");
            }
        }
        function yzpwd2() {
            var pwd = $("#pwd").val();
            var pwd2 = $("#pwd2").val();
            if (pwd != pwd2) {
                $("#pwdts2").html("两次输入的密码不一致");
                $("#pwdts2").css("color", "red");
            } else {
                $("#pwdts2").html("√");
                $("#pwdts2").css("color", "green","font-size","15px");
            }
        }
        function tjyz() {
            var username = $("#userName").val();
            var pwd = $("#pwd").val();
            if (username == "" || pwd == "") {
                alert("不能有空值");
                return false;
            } else {
                return true;
            }
        }
    </script>
    </div>
</body>
</html>

Register样式

.kdom{
    width:500px;
    height:400px;
    border-radius:5px;
    box-shadow:0 2px 8px #808080;
    margin:100px auto;
}
.tstext{
    font-size:10px;
}

Index

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <h1>主页</h1>
        @foreach (var item in ViewBag.add)
        {
           <p>账号：@item.userName</p>
           <p>密码：@item.pwd</p>
        }
    </div>
</body>
</html>

效果：

总结：

敲打代码的时候一定要语法正确和书写

标签：userName,Index,StemUsers,验证,Register,视图,表单,pwd,public
来源： https://www.cnblogs.com/andjieran/p/16198776.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

视图表单验证