解決方案① el-from上要使用:model不要使用v-model

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

解決方案② el-from-item上是否有加prop，并確定prop是不是和編寫的規(guī)則相同

  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="testForm.name"></el-input>
  </el-form-item>
  // 校驗(yàn)規(guī)則 prop name相同
   rules: {
    	name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ]
       }

解決方案③$refs[formName]與$refs.formName注意事項(xiàng) 前者提交的時(shí)候要傳參@click="submitForm('ruleForm')" 不然不生效

//官方的寫法是$refs[formName]  
 <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="testForm.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form-item>
 <el-form>
 data() {
    return {
    testForm:{
        name:'',
      },
   rules: {
    	name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ]
       }
    }
  },
 methods: {
    // 第一種方法要接收參數(shù) 并且$refs[formName]
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

//網(wǎng)上也有用 $refs.formName 第二種寫法的 
 <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="testForm.name"></el-input>
  </el-form-item>
  <el-form-item>
  // 不需要傳參 第二種方式
    <el-button type="primary" @click="submitForm()">提交</el-button>
  </el-form-item>
 <el-form>
 data() {
    return {
    testForm:{
        name:'',
      },
   rules: {
    	name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ]
       }
    }
  },
 methods: {
    // 第二種方法不需要接收參數(shù) 并且$refs.formName
      submitForm() {
        this.$refs.formName.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

解決方案④網(wǎng)上有人說 未在data里面聲明初始數(shù)據(jù)也會(huì)報(bào)錯(cuò)(未復(fù)現(xiàn).解決方案僅供參考)

  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="testForm.name"></el-input>
  </el-form-item>
 data() {
    return {
  // 校驗(yàn)規(guī)則 prop name相同
    testForm:{
        name:'',//意思是這個(gè)位置沒有聲明 name 也會(huì)不生效 我測(cè)試了一下不聲明也生效 僅供參考
      },
   rules: {
    	name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ]
       }
    }
  }

平時(shí)遇到的一些小問題 自我記錄 有補(bǔ)充的地方希望大家多多提出意見 共同學(xué)習(xí)!
如有轉(zhuǎn)載 請(qǐng)備注原文地址!文章來源地址http://www.zghlxwxcb.cn/news/detail-503297.html

到了這里，關(guān)于vue element ui From表單校驗(yàn)不生效問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！