简单的表单验证

<template>
    <div>
        <div class="form">
            <form action="" method="get">
               <div>旧密码：<input type="password" v-model="oldPwd" @input="oldpwd" maxlength="6"></div>
               <div>新密码：<input type="password" v-model="newPwd"></div>
               <div>确认密码：<input type="password" v-model="newPwd1" @input="test"></div>
               <input type="submit" value="提交" :disabled ="disabled">
            </form>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            oldPwd:"",
            oldPwd1:"123456",
            newPwd:"",
            newPwd1:"",
            disabled: true,
        }
    },
    methods:{
        oldpwd(){
            if(this.oldPwd == ""){
                this.$message("请填写密码");
            }else if(this.oldPwd.length == 6){
                if(this.oldPwd !== this.oldPwd1) {
                    this.$message("旧密码输入错误!");
                }
            }
        },
        test(){
            if(this.newPwd1.length == this.newPwd.length) {
                if(this.newPwd !== this.newPwd1){
                    this.$message("两次输入密码不一致，请重新输入!")
                }else if(this.newPwd == this.newPwd1 && this.oldPwd == this.oldPwd1) {
                    this.disabled = false;
                }
            }
        }
    },
}
</script>
<style scoped>
.form {
    width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.form div {
    margin-bottom: 10px;
}
input[type="password"] {
    height: 20px;
}
input[type="submit"]{
    width: 200px;
    height: 30px;
    margin-top: 20px;
}
form {
    width: 100%;
}
</style>