今天是复习MVC的第二天，准备自己写一个后台管理，然后慢慢写大，做全。

个人感觉做 Web 的，前端知识是必备的，所有今天学习了一下 Vue，很多人用这个，我以前没有用过，今天把它补起来。

比较了各个学习 Vue 的地方，感觉官方文档讲得很详细，推荐一个学习的网站，将 Vue 讲的很清楚：http://how2j.cn/k/vuejs/vuejs-start/1744.html

这个网站主要是学 Java 的，不过 Java 部分我还没怎么看，只是大致浏览了一下前端部分，感觉很不错，站主很用心。

不多说，直接上代码：

<body>

    <div class="box">

        <div id="header">

            <h1>LOGIN</h1>

        </div>

        <form id="adminform">

            <div class="group">

                <input class="inputMaterial" type="text" v-model="usercode" required>

                <span class="highlight"></span>

                <span class="bar"></span>

                <label>Usercode</label>

            </div>

            <div class="group">

                <input class="inputMaterial" type="password" v-model="password" required>

                <span class="highlight"></span>

                <span class="bar"></span>

                <label>Password</label>

                <p class="vm_message"> {{ passwordVerification }}</p>

            </div>

            <button id="buttonlogintoregister" v-on:click='btnLogin'>Login</button>

        </form>

        <div id="footer-box"><p class="footer-text">Not a member?<span class="sign-up"> Sign up now</span></p></div>

    </div>

    <script>

        var data = {usercode:"",password:"",message:""}

        var vm = new Vue({

            el: "#adminform",

            //data: {

            //    usercode: '',

            //    password: '',

            //},

            data: data,

            computed: {

                passwordVerification() {//动态验证

                    //6-12位，包含大写字母，小写字母、数字和下划线

                    //var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,12}$/;

                    //6-12位，至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符

                    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;

                    if (data.password == "")

                        return "";

                    else if (!reg.test(data.password))

                        return message = "6-12位，包含大小写字母\数字,不能有特殊字符";

                },

            },

            methods: {

            },

        })

    </script>

</body>

　　第一步，引用 Vue，我是下载到本地了的；

　　第二步，我这里动态获取 password ，所以我定义了个 data：

var data = {usercode:"",password:"",message:""}

　　然后 new Vue 里面获取了 form 表单：

el: "#adminform",

　　因为默认 input 是空，所以直接利用利用 v-model 与 data中的初始数据进行绑定，随着输入框的变化，data 中的数据也会发生变化，所以直接在 computed 中进行动态验证：

passwordVerification() {//动态验证

                    //6-12位，包含大写字母，小写字母、数字和下划线

                    //var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,12}$/;

                    //6-12位，至少包括一个大写字母、一个小写字母、一个数字、不能有除开特殊字符

                    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;

                    if (data.password == "")

                        return "";

                    else if (!reg.test(data.password))

                        return message = "6-12位，包含大小写字母\数字,不能有特殊字符";

                },

　　这里我用的正则表达式来进行密码格式校验，让密码在6-12位中，且至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符

　　根据判断会返回不同的值进行显示，可以把这里的判断写复杂一点。

　　总结：今天主要就是去复习前端知识了，除了学习了一手 Vue 外，还回顾了一下 HTML DOM。感觉自己进度不够快，毕竟是边学边用，稳一点好。

　　这里也可以写成methods：

　　body:

                <p class="vm_message"> {{ passwordVerification1() }}</p> @*methods写法*@

　　script:

            methods: {

                passwordVerification1() {

                    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;

                    if (data.password == "")

                        return "";

                    else if (!reg.test(data.password))

                        return message = "6-12位，包含大小写字母\数字,不能有特殊字符";

                }

            },

　　

　　补充：computed 是有缓存的，只要计算前的数值没有变化，就会直接返回以前计算出来的值，而不会再次计算。 这样如果是复杂计算，就会节约不少时间。
　　　　　而methods每次都会调用

重拾MVC——第二天：Vue学习与即时密码格式验证的更多相关文章

  1. 重拾MVC——第一天：数据库连接与SqlDbHelper

    这个 SqlDbHelper 是我参考网上的和以前用过的 SqlDbHelper 自己写的一个非常简单的东西,主要是记录自己的学习情况 首先在Web.config中配置数据库连接字符串: <co ...

  2. 乡下人重拾MVC——@RenderBody @RenderSection @Html.Partial @Html.Action @Html.RenderPartial @Html.RenderAction

    1.   @RenderBody()  代表:是一个占位符,是留给子页面的位置,子页面使用这个模版,子页面中的内容会被放到@RenderBody的位置.合并后当作一个整体加载 2.   @Render ...

  3. 重拾IP路由选择：CCNA学习指南中的IP路由选择

    IP路由选择技术 是网络技术的核心部分,也是目前研究的热点,其中的 动态路由选择协议 比如RIPv1,RIPv2,OSPF等,解决了数据在网络中转递的诸多问题. 在TCP/IP协议详解的学习过程中,我 ...

  4. 乡下人重拾MVC——创建视图

    1. 创建视图都不勾选:代表不使用任何模版,页面的代码即为运行后显示的内容 2.  创建分部视图 代表统会自动把View文件夹下名为“_ViewStart.cshtml”的内容添加到新建的html最上 ...

  5. 重拾c++第二天（4）：复合类型

    1.定义:种类 数组名[元素个数] = {元素1,...,元素n} ,或者直接赋值:数组名[元素位置] = 值; 2.部分初始化,其他全为0,可以就定义一个0,这样得到0数组(或者就一个{},别的啥也 ...

  6. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  7. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  8. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  9. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

随机推荐

  1. ？ 这是个很好的问题。Go 当前的 GC 显然做了一些额外的工作，但它也跟其他的工作并行执行，所以在具有备用 CPU 的系统上，Go 正在作出合理的选择。请看 https://golang.org/issue/17969 结束语（Closing notes） 通过研究 Go 垃圾收集器，我能够理解 Go GC 当前结构的背景以及它如何克服它的弱点。Go发展得非常快。如果你对 Go感兴趣，最好继

    ? 这是个很好的问题.Go 当前的 GC 显然做了一些额外的工作,但它也跟其他的工作并行执行,所以在具有备用 CPU 的系统上,Go 正在作出合理的选择.请看 https://golang.org/i ...

  2. kotlin标准委托之惰性装载

    lazy函数,接受一个lambda表达式作为参数,返回一个Lazy<T> 类型的实例,这个实例可以作为委托,实现惰性加载属性;第一次调用get时,将会执行从lazy函数传入的lambda表 ...

  3. Tomca的启动与关闭

    点击startup.bat启动,遇到一闪而过的问题,可能尚未配置JAVA_HOME 8080端口被占用导致启动失败 关闭Tomcat的三种方式 * 点击x (不推荐) * 双击shutdown.bat ...

  4. shell编程（2）

    一.变量简介 变量是任何一种编程语言都必不可少的组成部分,变量用来存放各种数据.脚本语言在定义变量时通常不需要指明类型,直接赋值即可,shell变量也遵循这个规则. 在Bash shell 中,每一个 ...

  5. Semaphore 并发信号

    package com.thread; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executo ...

  6. ubuntu安装ubuntu-kylin-software-center

    sudo apt-get updatesudo apt-get upgradesudo apt-get install --reinstall ubuntu-kylin-software-center ...

  7. Re-ranking Person Re-identification with k-reciprocal Encoding

    Re-ranking Person Re-identification with k-reciprocal Encoding Abstract In this paper, we propose a ...

  8. JAVA数据结构和算法 6 递归

    递归:直接或者间接地调用自己.比如计算连续数的阶乘,计算规律:n!=(n-1)!*n. 每个递归方法都有一个基值(终止)条件,以防止无线地递归下去,以及由此引发的程序崩溃. 采用递归是因为它可以从概念 ...

  9. C/C++.字符串分割

    1.ZC:只测试使用了 自己改编的函数SplitStr_ZZ(...),其它的 未测试 #include <string> #include <vector> #include ...

  10. vue v-slot

    参考链接:https://www.jianshu.com/p/7020636d68a5