1. 程式人生 > >element UI 中 el-form 表單包含多個 el-input 時的校驗方法

element UI 中 el-form 表單包含多個 el-input 時的校驗方法

這一點element-ui真是有點死板,我是這樣解決的,有兩個情況,prop可以只繫結第一個input的,第二個input寫上ref屬性,驗證的rules中寫一個方法,這個方法驗證第一個input框的同時,通過 this.$refs.xxx.value的形式獲取第二個input框值,只要這兩個input框中存在有問題的情況則直接返回error。當然這個方法不能算優雅,我也是分享下我的經驗,有更好的方法希望大家分享下,網上沒有好的答案,特此分享

<el-form-item label="同步資料頻率:" prop="frequency">
      <el-input size="mini" v-model="addForm.frequency" class="form-input" style="width: 60px;"></el-input>
      次/
      <el-input size="mini" v-model="addForm.frequencyMinute" class="form-input" style="width: 60px;" ref="frequencyMinute"></el-input>
      分鐘
      <span style="color: rgba(0,0,0,0.29);">均為空則不限制請求頻率</span>
    </el-form-item>

以上是頁面程式碼,校驗部分

frequency:[
        { validator: checkFrequency, trigger: 'blur' }
      ]

校驗方法

var checkFrequency = (rule, value, callback) => {
    let minutes = this.$refs.frequencyMinute.value;
    if (!value && !minutes) {
      callback();
    }
    var reg =  /^[1-9]\d*$/;
    if (!reg.test(value) || !reg.test(minutes)) {
      callback(new Error('請輸入非零正整數'));
    } else {
      if (value > 1440 || minutes > 1440) {
        callback(new Error('數值不能大於1440'));
      } else {
        callback();
        }
      }
    };