今天是复习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. kotlin中类型检查和类型转换

    is 和!is操作符,可以在运行时检查一个对象与一个给定的类型是否一致,或者使用与它相反的!is操作符 fun main(arg: Array<String>) { var a :Any= ...

  2. Flask中current_app和g对象

      Flask零基础到项目实战(七)请求方法.g对象和钩子函数 一.get方法 二.post方法 post请求在模板中要注意几点: input标签中,要写name来标识这个value的key,方便后台 ...

  3. SQL语句中有关单引号、双引号和加号的问题

    字符串数据是用单引号包在外面的,而+号只是用来连接这些字符串的. 数据库里的字段是整型的时候不要加单引号,是字符串的时候要加,其它类型根据实际情况来,双引号就是用来拼接字符串的,单引号是sql文的固有 ...

  4. clientdataset的使用

      clientdataset的使用(一) Delphi做为一个快速应用开发工具,深受程序员的喜爱.其强大的组件功能,让程序员能够轻松. 高效地完成常见的界面开发.数据库应用等功能.然而,帮助的相对缺 ...

  5. array_splice 在数组某位置插入数据

    $arr=array('a','b','c','d','e','f','g');//目标数组 $i_arr=array(');//要插入的数组 $n=;//插入的位置 array_splice($ar ...

  6. jenkins通过ssh登不上远程主机

    https://blog.csdn.net/cdnight/article/details/81078191 就是需要切换jenkins用户,用jenkins用户生产的秘钥拷到其他主机上

  7. Kali中安装 Shodan

    工具介绍 Shodan 是一个搜索引擎,但它与 Google 这种搜索网址的搜索引擎不同,Shodan 是用来搜索网络空间中在线设备的,你可以通过 Shodan 搜索指定的设备,或者搜索特定类型的设备 ...

  8. CTF基础知识 && AWD红蓝对抗

    AWD 备份源码,修改账户密码,查看是否有预留后门然后删掉 修改mysql密码 格式:mysqladmin -u用户名 -p旧密码 password 新密码 例子:mysqladmin -uroot ...

  9. 【编程开发】MD5算法原理

    MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权费用.     MD5功能: ...

  10. 【DSP开发】帮您快速入门 TI 的 Codec Engine

    德州仪器半导体技术(上海)有限公司 通用DSP 技术应用工程师 崔晶 德州仪器(TI)的第一颗达芬奇(DaVinci)芯片(处理器)DM6446已经问世快三年了.继DM644x之后,TI又陆续推出了D ...