快捷導(dǎo)航

vue2使用elform的rules校驗(yàn)的示例詳解

更新時(shí)間：2025年07月04日 09:27:01 作者：攻城獅-申

這篇文章主要介紹了vue2使用elform的rules校驗(yàn)的示例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

在使用vue2開(kāi)發(fā)項(xiàng)目的時(shí)候使用element組件的el-form大多數(shù)情況都需要用到必填項(xiàng)校驗(yàn)
舉個(gè)栗子：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
        },
        rules: {
          name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
          ],
        }
      };
    },
    methods: {
      submitForm(ruleForm) {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
      }
    }
  }
</script>

這里我們的表單里有‘活動(dòng)名稱(輸入框)’和‘活動(dòng)區(qū)域(下拉框)’兩個(gè)選項(xiàng)，我們?cè)?lt;el-form>這里寫了

:rules="rules"

這就代表我們這個(gè)el-form表單的校驗(yàn)是根據(jù)rules來(lái)的，而在下面<el-form-item>里我們寫了'prop="xxx"',這里的屬性為rules里需要校驗(yàn)的字段名,也就是data里定義的

rules: {
          name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
          ],
        }

*這里需要注意的是我們prop里的字段和rules里的字段名一定要對(duì)應(yīng)上，這樣el-form表單的校驗(yàn)才會(huì)生效

然后我們?cè)邳c(diǎn)擊確定的時(shí)候調(diào)方法進(jìn)行校驗(yàn)即可

this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

這里的[ruleForm]要跟上面el-form表單的ref的命名保持一致

更新：

如果遇到需要?jiǎng)討B(tài)加校驗(yàn)
我們只需要在el-form-item這里加上

:rules="定義的變量 ? rules.name : []"

像這樣

  <el-form-item label="活動(dòng)名稱" prop="name"
    :rules="定義的變量 ? rules.name: []">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

這個(gè)定義的變量是用來(lái)動(dòng)態(tài)判斷是否需要加校驗(yàn)的，這個(gè)值你只需要放在你需要判斷是否需要加校驗(yàn)的地方就行了

*這里有個(gè)點(diǎn)需要注意，單獨(dú)加的校驗(yàn)有可能會(huì)在你輸入/選擇選項(xiàng)之后還是提示校驗(yàn)未通過(guò)

這個(gè)時(shí)候我們需要在輸入框/下拉框的change事件里再單獨(dú)執(zhí)行一下校驗(yàn)就可以了，比如像這樣：

change方法名() {
            this.$refs.ruleForm.validateField('name'); // 需要判斷的那個(gè)選項(xiàng)的prop，要對(duì)應(yīng)rules里定義的值
        },

這樣就實(shí)現(xiàn)了對(duì)一個(gè)選項(xiàng)動(dòng)態(tài)加判斷校驗(yàn)

附加element的官網(wǎng)地址：Element - The world's most popular Vue UI framework

到此這篇關(guān)于關(guān)于vue2使用elform的rules校驗(yàn)的文章就介紹到這了,更多相關(guān)vue2 elform rules校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！