【一】题目要求：编写一个注册表单，配合vue完成表单验证
（1）用户名长度必须至少2个字符
（2）密码强度校验
（3）如果有字母、数字、特殊字符其中三项，且长度为6以上为高强度
如果有字母、数字、特殊字符其中两项，且长度为6以上为中强度
如果仅有字母、数字、特殊字符其中一项，或长度不足6，为低强度
（4）短信验证码发送按钮，点击后变灰（不可用）进行60 s倒计时，倒计时结束，才能重新点击
（5）同意许可协议复选框必须勾选
（6）有一项校验不通过，在表单项之后给出相应的提示
（7）在校验不通过之前，注册按钮为灰色（不可用）
【二】实现步骤：
步骤一：新建一个Directory，并加以命名（eg:js）。
步骤二：往js中加入vue.js。将vue.js的路径加入代码中。（如果代码和vue.js在同一目录下则可写为 src="vue.js" ，如果代码在 与js平级的另一目录下则可写为 src="目录名/vue.js"）
步骤三：代码实现。
【三】代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<form action="aaa">
<div id="app">
<p>用户名:
<input type="text" v-model="name" placeholder="用户名" @blur="checkname()">
<span>{{msgname}}</span>
</p>
<p>密码:
<input @keyup="checkpassword()" type="password" v-model="password" placeholder="密码">
<span>{{msgpassword}}</span>
</p>
<p>
<input type="button" v-model="btn" @click="codebtn()">
<input type="text" placeholder="验证码">
<span></span>
</p>
<p>
<input type="checkbox" v-modal="check" @click="checkagree()">同意"服务条款"和"隐私权相关政策"
<span>{{msgagree}}</span>
</p>
<hr>
<p>
<input type="submit" value="注册" @click="register($event)">
</p>
</div>
<script>
var vew = new Vue({
el:"#app",
data:{
name:"",
password:"",
msgname:"",
check:true,
msgpassword:"",
msgagree:"",
btn:"获取验证码",
disab:false,
c:60
},
methods:{
checkname:function(){
if(this.name.length==0){
this.msgname="用户名不能为空";
}else if(this.name.length<2)
{
this.msgname="用户名至少2个字符";
}else{
this.msgame="";
}
return this.name>2;
},
checkpassword:function(){
var word=this.password.trim();
if(word.length==0)
this.msgpassword="密码不能为空";
var count=0;
if(/[0-9]/.test(word)){
count++;
}
if(/[A-Za-z]/.test(word))
{
count++;
}
if(/[^0-9A-Za-z]/.test(word)){
count++;
}
if(count==3&& word.length>=6)
{
this.msgpassword="高强度";
}else if(count==2&& word.length>=6){
this.msgpassword="中强度";
}else{
this.msgpassword="低强度";
}
return word >=0;
},
codebtn:function () {
console.log(1);
this.disab=true;
setTimeout(this.enableCodeBtn,1000);
},
enableCodeBtn:function () {
if(this.c > 0) {
this.btn=this.c+"秒后重新获取";
setTimeout(this.enableCodeBtn, 1000); // 1 秒后再次调用自己
this.c--;
} else {
this.disab=false;
this.btn="获取短信验证码";
this.c = 60;
}
},
checkagree:function () {
if(!this.check){
this.msgagree="";
}else{
this.msgagree= "必须勾选";
}
return this.check;
},
register:function (event) {
if(this.checkname()&this.checkpassword()&this.checkagree()){
}else{
console.log(1);
event.preventDefault();
}
}
}
})
</script>
</form>
</body>
</html>【四】样例输出：
【五】错误及分析：
也许你也会见到和我一样的页面输出：
造成这样界面的原因在于：往js中加入vue.js的路径写的有问题，我的正确路径应该是src="vue.js"，但由于疏忽写成了src="js/vue.js"，所以才造成页面输出问题。如果你也遇到了这样的问题，希望我的意见对你有效。。。