视图表单验证

初始化项目

新建一个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. python 面向对象的一些魔法方法和反射

    1.with和__enter__,__exit__,__init__配合使用class A: def __init__(self): print('init') def __enter__(self) ...

  2. MySQL 里记录货币用什么字段类型好?

    NUMERIC 和 DECIMAL 类型被 MySQL 实现为同样的类型,这在 SQL92 标准允 许.他们被用于保存值,该值的准确精度是极其重要的值,例如与金钱有关的数 据.当声明一个类是这些类型之 ...

  3. 一个Spring的应用看起来象什么？

    一个定义了一些功能的接口. 这实现包括属性,它的Setter , getter 方法和函数等. Spring AOP. Spring 的XML 配置文件. 使用以上功能的客户端程序.

  4. 谈一谈 Kafka 的再均衡？

    在Kafka中,当有新消费者加入或者订阅的topic数发生变化时,会触发Rebalance(再均衡:在同一个消费者组当中,分区的所有权从一个消费者转移到另外一个消费者)机制,Rebalance顾名思义 ...

  5. SpringBoot集成SpringBootDataElasticSearch

    先放出依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  6. Maven的Scored介绍

    Maven的Scored值的介绍:http://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.ht ...

  7. apollo规划控制视频-12basic motion planning and overview

  8. simulink模块使用方式

    逻辑模块 1.小于等于系列模块 Applies the selected relational operator to the inputs and outputs the result. The t ...

  9. Numpy对数组按索引查询

    Numpy对数组按索引查询 三种索引方法: 基础索引 神奇索引 布尔索引 基础索引 一维数组 和Python的List一样 二维数组 注意:切片的修改会修改原来的数组 原因:Numpy经常要处理大数组 ...

  10. Python 与 C++ 向量

    Python 与 C++ 向量 Python 和 C++ 对比 我们再回到向量!你已经学习了如何声明一个空的向量. 在下面的代码中,你可以比较 Python 列表和 C++ 向量的语法.你会看到,C+ ...