一、問題描述

這里由一個動態(tài)切換規(guī)則校驗引發(fā)的一些問題，整理了下，如下文所示。

1.動態(tài)綁定規(guī)則校驗

這里有個需求就是，動態(tài)切換radio，對input輸入框校驗，界面如下

在網上找了一圈，用了第一種方法來解決，動態(tài)添加驗證規(guī)則，方法如下

          <el-form-item label="授權密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platformType === 2 ? rules.hundredApiKey:[{ required: false}]">
            <el-col :span="10">
              <el-input v-model="form.value.hundredApiKey" placeholder="請輸入授權密匙(Key)" />
            </el-col>
          </el-form-item>

通過if判斷platformType是否等于2，然后添加規(guī)則，rules.hundredApiKey和required: false，后面看網上說的，直接通過v-if就能實現(xiàn)動態(tài)的效果，不需要后面再通過:rules方式添加，不顯示控件該規(guī)則默認就失效。

      // 表單校驗
      rules: {
        hundredApiKey: [{ required: true, message: "快遞100 API Key不能為空", trigger: ['blur','change']}]
      }

2.rules與form綁定的問題

這里又遇到了其他問題，就是輸入明明有值，硬是提示，輸入的值不能為空，可按如下步驟排除：

:model="ruleForm" 綁定的ruleForm值是否掛載成功并且操作的是否是這個表單。
:rules="rules" 校驗的規(guī)則格式綁定的rules是否定義并且格式正確為對象數(shù)組。
el-form-item中的prop="name"是否和rules中的name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, ], 的名稱一致，兩個name是相同的，element的校驗就是根據(jù)這個prop找對應的輸入框的。
<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"確保對象ruleForm中有name這個屬性！

注意：

如果你的rules和form綁定的數(shù)據(jù)層級是一樣的話，如下所示

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="選項：" prop="name">
      <el-select v-model="form.name">
        <el-option label="測試一" value="1"></el-option>
        <el-option label="測試二" value="2"></el-option>
      </el-select>
    </el-form-item>
</el-form>
 
form:{
	name:'',
},
rules:{
    name:[{required: true, message: '請選擇', trigger: 'blur'}]
}

上面的綁定就沒問題，我這用的是如下的格式

form:{
	a:{
		name:'',
	}
},

a對象里有個name的屬性，用上面的方式綁定，死活不行，正確的方式如下，有兩種解決方案：

解決方案1：在規(guī)則定義與綁定時，規(guī)則結構 與 數(shù)據(jù)結構一致

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="選項：" prop="a.name">
      <el-select v-model="form.a.name">
        <el-option label="測試一" value="1"></el-option>
        <el-option label="測試二" value="2"></el-option>
      </el-select>
    </el-form-item>
</el-form>
 
form:{
	a:{
		name:'',
	}
},
rules:{
    'a.name':[{required: true, message: '請選擇', trigger: 'blur'}]
}

解決方案2：將表單綁定的數(shù)據(jù)對象修改成對象的子對象。

<el-form :model="form.a" :rules="rules" ref="form">
    <el-form-item label="選項：" prop="name">
      <el-select v-model="form.a.name">
        <el-option label="測試一" value="1"></el-option>
        <el-option label="測試二" value="2"></el-option>
      </el-select>
    </el-form-item>
</el-form>
 
form:{
	a:{
		name:'',
	}
},
rules:{
    name:[{required: true, message: '請選擇', trigger: 'blur'}]
}

3.rules校驗使用v-if無效

上面的表單里如果有多個組件，只有一個有效，其他的校驗規(guī)則全都無效。

<el-form-item label="選項：" prop="name">

這個問題，搞了我好久，后面調試的過程中發(fā)現(xiàn)了這個規(guī)律，在網上找出了答案，只需要添加key屬性就行了文章來源地址http://www.zghlxwxcb.cn/news/detail-418620.html

<el-form-item label="選項：" prop="name" key="name">

到了這里，關于vue表單驗證rules無效,rules動態(tài)選擇,rules動態(tài)校驗,rules對象嵌套校驗的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！