视图表单验证

初始化项目

新建一个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. URL转义特定字符

    import java.net.URLDecoder; import java.net.URLEncoder; import java.nio.charset.Charset; // 实例代码 Str ...

  2. SpringSecurity集成启动报 In the composition of all global method configuration, no annotation support was actually activated 异常

    异常内容: Caused by: java.lang.IllegalStateException: In the composition of all global method configurat ...

  3. 关于 OOP 和设计模式？

    这部分包含 Java 面试过程中关于 SOLID 的设计原则,OOP 基础,如类,对象, 接口,继承,多态,封装,抽象以及更高级的一些概念,如组合.聚合及关联. 也包含了 GOF 设计模式的问题.

  4. centos 7环境下安装jdk

    在此之前已经安装了xshell并能传输文件. 1.下载对应版本的jdk:jdk-8u191-linux-x64.tar.gz 2.上传到centos的目录下 3.解压jdk的gz包,命令: tar - ...

  5. freemarker与vue使用图片路径获取问题，可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  6. 小技巧之“将Text文件中的数据导入到Excel中，这里空格为分割符为例”

    1.使用场景 将数据以文本导出后,想录入到Excel中,的简便方案, 起因:对于Excel的导出,Text导出明显会更方便些 2.将Text文件中的数据导入到Excel中,这里空格为分割符为例的步骤 ...

  7. 业务网关之AK中心建设

    啥是AK AK(Access Key)是一种身份证明,它解决了"资源的使用者是谁"这个问题,比如在生活中,身份证可以证明你是你,而在云计算或程序中,AK能证明你是这个应用的拥有者. ...

  8. cpu内部组成

    计算机系统的硬件结构主要由四部分组成:控制器.运算器.内存和输入输出设备 其中,控制器和运算器统称为中央处理器.简称CPU.它是计算机硬件系统的指挥中心. 它包括控制器.运算器.寄存器三个部分,其中, ...

  9. ECMAScript中有两种属性：数据属性和访问器属性。

    ECMA-262定义这些特性是为了实现JavaScript引擎用的,因此在JavaScript中不能直接访问它们.为了表示特性是内部值,该规范把它们放在了两对儿方括号中,例如 [[Enumerable ...

  10. 【uniapp 开发】如何给边框添加阴影效果

    css的box-shadow是用来添加边框阴影效果的. 属性值详解: 1.inset 可选值,默认阴影在盒子外 使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在. 2. 这是头两 ...