ElementUI 表單校驗 有內容仍然會提醒

參照：elementUI官方文檔

　　https://element.eleme.cn/#/zh-CN/component/form

 

常見錯誤，幾個要點：

　　<template>中

　　1.<el-form>標簽中， model 和 rules屬性 未填

　　2.<el-form-item>標簽中，prop屬性 未填

　　3.<el-input>標簽中，v-model屬性 不對應第二點中的prop屬性

　　<script>中

　　　　4.rules中，每個規則的名字不對應<template>中第二點和第三點

 

附上精簡的示例代碼（.vue文件）

<template>    

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

   <el-form-item label="活動名稱" prop="name">

        <el-input v-model="ruleForm.name"></el-input>
 
   </el-form-item>

</template>

<script>

export default{

 data(){

return{ 

ruleForm: {
        name: ''
}

rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' }
          ]
    }   
}
}        
}


</script>