快捷導(dǎo)航

element?ui?From表單校驗(yàn)不生效問(wèn)題解決

更新時(shí)間：2024年01月02日 08:49:50 作者：奔跑的代碼！

表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作，表單校驗(yàn)可以提醒用戶填寫(xiě)數(shù)據(jù)規(guī)則以確保用戶提交數(shù)據(jù)的有效性，本文主要介紹了element?ui?From表單校驗(yàn)不生效問(wèn)題解決，具有一定的參考價(jià)值，感興趣的可以了解一下

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

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

解決方案② el-from-item上是否有加prop，并確定prop是不是和編寫(xiě)的規(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')" 不然不生效

//官方的寫(xiě)法是$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 第二種寫(xiě)法的 
 <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)上有人說(shuō) 未在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è)位置沒(méi)有聲明 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í)遇到的一些小問(wèn)題自我記錄有補(bǔ)充的地方希望大家多多提出意見(jiàn) 共同學(xué)習(xí)!

到此這篇關(guān)于element ui From表單校驗(yàn)不生效問(wèn)題解決的文章就介紹到這了,更多相關(guān)element From表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: