视图表单验证

初始化项目

新建一个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. 解释AOP模块 ？

    AOP模块用于发给我们的Spring应用做面向切面的开发, 很多支持由AOP联盟提供,这样就确保了Spring和其他AOP框架的共通性.这个模块将元数据编程引入Spring.

  2. kafka follower如何与leader同步数据？

    Kafka的复制机制既不是完全的同步复制,也不是单纯的异步复制.完全同步复制要求All Alive Follower都复制完,这条消息才会被认为commit,这种复制方式极大的影响了吞吐率.而异步复制 ...

  3. 如何实现数组与List的相互转换？在 Queue 中 poll()和 remove()有什么区别？哪些集合类是线程安全的？

    如何实现数组与List的相互转换? List转数组:toArray(arraylist.size()方法 数组转List:Arrays的asList(a)方法 /** * 〈一句话功能简述〉; * 〈 ...

  4. 杭电OJ 1248 不死族巫妖王 完全背包问题 字节跳动 研发岗编程原题

    转载至:https://blog.csdn.net/ssdut_209/article/details/51557776 Problem Description不死族的巫妖王发工资拉,死亡骑士拿到一张 ...

  5. Spring 切面可以应用五种类型的通知？

    Spring 切面可以应用五种类型的通知: before:前置通知,在一个方法执行前被调用. after: 在方法执行之后调用的通知,无论方法执行是否成功. after-returning: 仅当方法 ...

  6. Protected 修饰符

    Protected 修饰的变量和方法,在子类中可见.所有的变量和方法,子类都继承( private 也是).父类的变量和方法在子类实例中预留内存空间. Private 成员不能被子类实例引用.构造方法 ...

  7. Cadence 错误合集

    1.原理图DRC出现如下错误"Duplicate Pin Name "GND" found on Packag" 解决方案:原因是元件引脚重复定义,可以进行重新 ...

  8. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  9. 安全市场迎来新挑战，FinClip助力车联网数据安全

    随着汽车工业的发展与电子技术的进步,智能汽车迎来了前所未有的蓬勃发展,随着汽车电动化.网联化.智能化交融发展,车辆运行安全.数据安全和网络安全风险交织叠加,安全形势更加复杂严峻......

  10. JDBC 4.0 开始Java操作数据库不用再使用 Class.forName加载驱动类了

    JDBC 4.0 开始Java操作数据库不用再使用 Class.forName加载驱动类了 代码示例 转自 https://docs.oracle.com/javase/tutorial/jdbc/o ...