今天是复习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 type="text/javascript">
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)(?!.*?[#[email protected]@$%^&*-]).{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)(?!.*?[#[email protected]@$%^&*-]).{6,12}$/;
if (data.password == "")
return "";
else if (!reg.test(data.password))
return message = "6-12位，包含大小写字母\数字,不能有特殊字符";
},
这里我用的正则表达式来进行密码格式校验，让密码在6-12位中，且至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符
根据判断会返回不同的值进行显示，可以把这里的判断写复杂一点。
总结：今天主要就是去复习前端知识了，除了学习了一手 Vue 外，还回顾了一下 HTML DOM。感觉自己进度不够快，毕竟是边学边用，稳一点好。
原文地址：https://www.cnblogs.com/Soaring-Free/p/11178942.html
时间： 2024-10-09 16:34:09