编写一个注册表单，配合vue完成表单验证

爱被打了一巴掌 2021-09-16 09:16 408阅读 0赞

**【一】题目要求**：编写一个注册表单，配合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>

--------------------

**【四】样例输出：**

![70][]

--------------------

**【五】错误及分析：**

也许你也会见到和我一样的页面输出：

![70 1][]

造成这样界面的原因在于：**往js中加入vue.js的路径写的有问题，我的正确路径应该是src="vue.js"，但由于疏忽写成了src="js/vue.js"，所以才造成页面输出问题。**如果你也遇到了这样的问题，希望我的意见对你有效。。。

[70]: /images/20210811/ab4b8854c2bf43c9a4be4f7021f9f11c.png
[70 1]: /images/20210811/9e1f0fb6f6ac48be95b3f5e67ccfc17b.png