视图表单验证

初始化项目

新建一个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

Register



@{

    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>
效果：
总结：

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

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

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

ASP.NET视图视图表单验证的更多相关文章

  1. asp.net MVC 强类型视图表单Ajax提交的注意事项

    xmfdsh这几天遇到这么一个问题,在MVC中通过model模型生成的强类型视图的表单,在提交后的回调函数并没有发挥作用.如下图: 如上图,无论是通过Ajax.BeginForm或者Html.Begi ...

  2. ASP.NET MVC Form表单验证与Authorize特性

    一.Form表单验证 1.基本概念 表单验证是一个基于票据(ticket-based)[也称为基于令牌(token-based)]的系统.当用户登录系统以后,会得到一个包含基于用户信息的票据(tick ...

  3. yii2.0 控制器方法 视图表单 Form表单处理

    假设我们在ArticleController.php下面的actionForm方法中来处理提交的表单 新建立一个 views/Article/article-form.php文件用来作为输入表单 &l ...

  4. 视图表单访问控制器操作方法的POST、GET方式对应关系

    在视图中,表单默认访问方式是FormMethod.Post(不会将请求显示在地址栏中).在控制器中,操作方法不标注属性,默认为HttpGet属性.会有以下情况出现. 1.表单不指定访问方式(默认形式为 ...

  5. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

  6. 关于phoenix构建hbase视图，更新hbase表后，视图表是否更新的验证

    1:创建表 create 'MY_TABLE', 'CF1','CF2' 2:在hbase上插入一条数据 put ' ,'CF1:V1', 'uwo1' 3:在phoenix上创建视图 create ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统（33）-MVC 表单验证

    系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...

  8. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  9. asp.net 登陆验证 Form表单验证的3种方式 FormsAuthentication.SetAuthCookie；FormsAuthentication.RedirectFromLoginPage;FormsAuthenticationTicket

    我们在登陆成功后,使用下面的3种方法,都是同一个目的:创建身份验证票并将其附加到 Cookie, 当我们用Forms认证方式的时候,可以使用HttpContext.Current.User.Ident ...

随机推荐

  1. Java 中会存在内存泄漏吗，请简单描述？

    理论上 Java 因为有垃圾回收机制(GC)不会存在内存泄露问题(这也是 Java 被 广泛使用于服务器端编程的一个重要原因):然而在实际开发中,可能会存在无 用但可达的对象,这些对象不能被 GC 回 ...

  2. spring-boot-learning-REST风格网站

    什么是REST风格: Representational State Transfer :表现层状态转换,实际上是一种风格.标准,约定 首先需要有资源才能表现, 所以第一个名词是" 资源&qu ...

  3. promethues常用的函数

    prometheus函数常用 时数据 (Instant vector): 包含一组时序,每个时序只有一个点,例如:http_requests_total区间数据 (Range vector): 包含一 ...

  4. AutoValue —— Generated immutable value classes

    本文参考 在<Effective Java>第三版第十条"Obey the general contract when overriding equals"中提到goo ...

  5. Python - 分支循环、可迭代对象与迭代器

  6. 机器学习 machine learn

    机器学习 机器学习 概述 什么是机器学习 机器学习是一门能够让编程计算机从数据中学习的计算机科学.一个计算机程序在完成任务T之后,获得经验E,其表现效果为P,如果任务T的性能表现,也就是用以衡量的P, ...

  7. 2_状态空间_State Space

  8. canvas离屏、旋转效果实践——旋转的雪花

    效果展示理论基础--"常见的canvas优化--模糊问题.旋转效果" 用离屏canvas画基础部分 1.封装画线函数 function drawLine(ctx,x1,y1,x2, ...

  9. 小程序完整对接 pingpp支付

    小程序完整对接 pingpp支付 有几个先要条件: 小程序需要企业认证且开通支付功能,个人认证是无法使用支付功能的(小程序微信支付官网) pingpp 本身接入的企业服务器(即商户服务器)并不强制要求 ...

  10. ES6-11学习笔记--代理Proxy

    Proxy代理 常用拦截方法 ES5拦截: let obj = {} let newVal = '' Object.defineProperty(obj, 'name', { get() { cons ...