解決element的表單校驗輸入框有值但校驗未通過的問題

前言

實際項目中，爲了精簡代碼，會涉及到在同一個表單中同時完成 查看編輯 新增等功能，
此篇解決：
1. 編輯的時候，明明給頁面回顯賦值了，但是校驗非空卻沒有通過的問題。
2. 表單剛一進頁面就校驗非空，顯示紅色提示的問題。
3.常規表單關於校驗的規則。

正文

demo是官方的表單提交例子，這裏主要強調一下，常見的問題和解決方法。

一、 如果遇見各種校驗問題首先檢查：

• :model="ruleForm" 綁定的ruleForm值是否掛載成功並且操作的是否是這個表單。

• :rules="rules" 校驗的規則格式綁定的rules是否定義並且格式正確爲對象數組。

• el-form-item中的prop="name"是否和rules中的name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, ], 的名稱一致，兩個name是相同的，element的校驗就是根據這個prop找對應的輸入框的。

• <el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"確保對象ruleForm中有name這個屬性！
  關於表單校驗的大部分bug的原因就是這四步綁定的值有問題，完全都是細心問題！！！

二、 解決編輯的時候，明明給頁面回顯賦值了，但是校驗規則沒有通過的問題

這個問題歸結到底是因爲 我在初始化綁定值得時候，給ruleForm: {}空對象,由於每一個item的v-modle =“ruleForm.name”，在編輯回顯的時候觸發了校驗規則，但是ruleForm.name這個屬性找不到，所以就報錯了，就這麼簡單啊。。。。尷尬

//錯誤！！！！！ ruleForm: {},
export default {
    data() {
      return {
        ruleForm: {},
        }
  }
正確！！！！！
export default {
    data() {
      return {
        ruleForm: {
        	 name: '',
          	 region: '',
          	 date1: '',
         	 date2: '',
         	 delivery: false,
         	 type: [],
          	resource: '',
          	desc: ''
          },
        }
  }

三、在編輯的時候，剛一進頁面就校驗非空

你從後端拿的數據編輯反顯，賦值給表單綁定的對象，綁定值改變觸發了表單驗證，但後端給的值是空的，所以驗證報錯了
解決方法：
1.在保證文中其他規則都正確的情況下，看看你的rules裏面的trigger是不是"change"，如果是的話改成其它的。
2.在反顯賦值的時候，將表單的第一次校驗清除掉
這裏使用了es6的箭頭函數和簡寫

this.ruleForm = ...//賦值
this.$nextTick(()=>this.$refs.ruleForm.clearValidate())

附：特殊的表單校驗–循環數據校驗、不確定key的表單校驗等

https://blog.csdn.net/weixin_43216105/article/details/88993785

demo：

<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>
  <el-form-item label="活動區域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請選擇活動區域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '請選擇活動資源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '請填寫活動形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

over~ 有問題留言