element?ui?From表單校驗不生效問題解決

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

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

解決方案① 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="活動名稱" prop="name">
    <el-input v-model="testForm.name"></el-input>
  </el-form-item>
  // 校驗規(guī)則 prop name相同
   rules: {
    	name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ]
       }

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

//官方的寫法是$refs[formName]  
 <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
  <el-form-item label="活動名稱" 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: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ]
       }
    }
  },
 methods: {
    // 第一種方法要接收參數 并且$refs[formName]
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

//網上也有用 $refs.formName 第二種寫法的 
 <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
  <el-form-item label="活動名稱" 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: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ]
       }
    }
  },
 methods: {
    // 第二種方法不需要接收參數 并且$refs.formName
      submitForm() {
        this.$refs.formName.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

解決方案④網上有人說未在data里面聲明初始數據也會報錯(未復現.解決方案僅供參考)

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

平時遇到的一些小問題自我記錄有補充的地方希望大家多多提出意見共同學習!

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

您可能感興趣的文章: