视图表单验证

初始化项目

新建一个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. 匿名内部类编译生成的class文件

    一.问题描述 跳槽到的新公司,相比原来的公司,软件开发非常不规范,经常各种坑.项目部署到生产现场之后,出现问题,我在修改之后编译生成class文件,然后将class文件发给现场的技术支持,技术支持将c ...

  2. MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么？

    以下是 MySQL_fetch_array 和 MySQL_fetch_object 的区别: MySQL_fetch_array() – 将结果行作为关联数组或来自数据库的常规数组返回. MySQL ...

  3. 什么是 MyBatis 的接口绑定？有哪些实现方式？

    接口绑定,就是在 MyBatis 中任意定义接口,然后把接口里面的方法和 SQL 语句绑 定, 我们直接调用接口方法就可以,这样比起原来了 SqlSession 提供的方法我们可 以有更加灵活的选择和 ...

  4. Java 中，Serializable 与 Externalizable 的区别？

    Serializable 接口是一个序列化 Java 类的接口,以便于它们可以在网络上传输 或者可以将它们的状态保存在磁盘上,是 JVM 内嵌的默认序列化方式,成本高. 脆弱而且不安全.Externa ...

  5. 4-Pandas数据预处理之数据转换（df.map()、df.replace()）

    在数据分析中,根据需求,有时候需要将一些数据进行转换,而在Pandas中,实现数据转换的常用方法有: 利用函数或是映射 可以将自己定义的或者是其他包提供的函数用在Pandas对象上实现批量修改. ap ...

  6. windows本地搭建easy-mock环境

    起因:由于easy-mock官网很不稳定,所以想搭建自己本地的mock环境 1.首先安装node.js 环境 (提供地址:https://nodejs.org/en/) 2.下载mongoDB 地址( ...

  7. HTML入门学习笔记（二）

    第三章 文本 段落 p <p>毫不奇怪,p是最常用到的HTML元素之一</p> 作者联系信息 address address并不是用于标记邮政地址,而是定义与HTML页面或页面 ...

  8. Canvas 核心技术

    最近项目需求中要写较多H5小游戏,游戏本身体量不是很复杂,主要是承载较多业务逻辑,所以决定用canvas来完成游戏部分.之前只是知道H5中有canvas这个东西,也知道它大概是画图的,但具体怎么用,还 ...

  9. 前端面试题整理——普通函数和new函数

    下列代码的输出值: function A() { console.log(1) } function fn() { A = function () { console.log(2) } return ...

  10. 每日所学之自学习大数据的Linux环境的配置

    今天开始配置环境,因为下载镜像文件需要很长时间,加上训练,所以Linux环境之配置了一半 VMware下载及安装教程(Window) 在安装虚拟机时需要下载镜像文件 下面是我下载的镜像文件的地址 Ce ...