重拾MVC——第二天：Vue学习与即时密码格式验证

今天是复习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每次都会调用

转载于:https://www.cnblogs.com/Soaring-Free/p/11178942.html

重拾MVC——第二天：Vue学习与即时密码格式验证相关推荐

Vue 登录手机号、密码格式验证及验证码60s获取
直接上代码: <el-input v-model="phoneRegister" placeholder="请输入手机号"> </el-inp ...
asp.net mvc 5 identity 2.0 注册时密码强度验证
asp.net mvc 5 identity 2.0 注册时密码强度验证密码强度验证分两部分,一部分是客户端,即浏览器中进行验证,另一部分是 identity 的 UserManager 中进行的. ...
重拾IP路由选择：CCNA学习指南中的IP路由选择
IP路由选择技术是网络技术的核心部分,也是目前研究的热点,其中的动态路由选择协议比如RIPv1,RIPv2,OSPF等,解决了数据在网络中转递的诸多问题. 在TCP/IP协议详解的学习过程中,我 ...
重拾强化学习的核心概念_强化学习的核心概念
重拾强化学习的核心概念 By Hannah Peterson and George Williams (gwilliams@gsitechnology.com) 汉娜·彼得森 ( Hannah Pet ...
重拾JavaSE学习笔记
重拾JavaSE学习笔记 1.常用DOS命令 2.了解Java 2.1 .java特性 2.2.JDK .JRE.JVM 2.3.java的加载和执行 3.开发环境搭建 3.1.安装jdk 3.2.配 ...
重拾CCNA，学习笔记持续更新ing......(4)
重拾CCNA,学习笔记持续更新ing......(4) 路由器作用功能的经典解说(笑)(非原创) 假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大 ...
Java学习之路1——安装JDK1.8||安装idea2022||Java项目创建【重拾Java】
Java学习之路1--安装JDK1.8||安装idea2022[重拾Java] 前言安装安装JDK1.8 安装idea2022(JetBrains Toolbox) Java项目创建创建项目结 ...
HMS Core Insights第二期直播预告——华为定位技术让你重拾方向感
[导读] 从古至今,人们从未停止对精确定位的追求.古人夜观星象定位,发明思南指引方向,用六分仪在大海上乘风破浪.而随着科技的发展,现代的人们已经可以通过手机享受便捷准确的定位服务.无论是出行导航,网购 ...
Java学习之路3——方法定义、调用【重拾Java】
Java学习之路3--方法定义.调用[重拾Java] 方法定义为什么要写方法方法完整的定义形式.调用方法定义的格式修饰符返回值类型返回值调用格式方法重载方法定义为什么要写方法对于 ...

重拾MVC——第二天：Vue学习与即时密码格式验证

重拾MVC——第二天：Vue学习与即时密码格式验证相关推荐

最新文章

热门文章