vue做一個簡單的登錄頁面，input校驗

vue做一個簡單的登錄頁面，input校驗

<template>
<div class="login-box">
    <h2>歡迎登錄</h2>
<el-form ref="form" :model="form" :rules="submitRules" label-width="80px">
  <el-form-item label="用戶名" prop='name'>
    <el-input v-model="form.name"  placeholder="請輸入用戶名"></el-input>
  </el-form-item>
  <el-form-item label="密碼" prop='password'>
    <el-input type="password " v-model="form.password"  placeholder="請輸入密碼" @keyup.enter.native="onSubmit('form')"></el-input>
  </el-form-item>  
    <el-button type="primary" @click="onSubmit('form')">立即登錄</el-button>
  </el-form>
</div>
  
</template>
<script>
export default {
    name:"Login",
     data(){
          const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密碼不能少於6位'))
      } else {
        callback()
      }
    }
         return{
             form:{
                 name:'',
                 password:''
             },submitRules:{
         name:[
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
            ],
            password:[
             { required: true, trigger: 'blur',validator: validatePassword}
            ]
     }
         }
     },
     methods:{
         onSubmit(formName){
            this.$refs[formName].validate((valid) => {

                    if (valid) {
                        //信息提交到服務器
                        this.$router.push("/Home") 
    
                    } else {
                        this.$message.error('請檢查輸入的內容');
                        return false;
                    }
                    });
         }
     }
}
</script>
<style>
.login-box{
    width:500px;
    height:300px;
    border:1px solid #DCDfe6;
    margin: 150px auto;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #DCDfe6;
}
</style>

備注

1.使用此方法前檢查prop一定必須要寫在 上面，寫在里面的input上或者其他任何地方都不行（el-form-item prop屬性綁定）
2.el-form rules，model屬性綁定，ref標識.
3. this.$ refs[formName].validate 這個是在點擊登錄按鈕后執行，其實就是拿到需要驗證的form表單進行相應規則的校驗, 這里是將$refs[formName] 這里就是將form的名字當做參數傳了過來，也可以直接this.$ refs.form.validate(valid => { （這里的form是表單里的ref="form" ref后面是什么值 ）

補充

待更新