element-UI表單驗證

轉載自：

一、簡單邏輯驗證（直接使用rules）

實現思路

•html中給el-form增加 :rules="rules"
•html中在el-form-item 中增加屬性 prop="名稱"

•js中直接在data中定義rules:{}

<el-form ref="form" :rules="rules" :model="form" label-width="300px">
  <el-form-item label="文案" prop="doc">
    <el-input v-model="form.doc" placeholder="字數限制15字以內"></el-input>
  </el-form-item>
</el-form>

<script>
export default {
 data() {
  return {
   form: {
     doc: '',
   },
   // 校驗規則
   rules: {
    doc: [
          {required: true, message: '必填', trigger: 'blur'}
        ]
   }
  }
 }
}
</script>

二、自定義驗證邏輯

實現思路

•html中給el-form增加 :rules="rules"
•html中在el-form-item 中增加屬性 prop="名稱"
•js中直接在data中在rules中的名稱對應中設置 validator: 驗證器名稱,

•js中在data中 return之上書寫驗證器對應的js驗證邏輯

（prop可以只綁定第一個input的，第二個input寫上ref屬性，驗證的rules中寫一個方法，這個方法驗證第一個input框的同時，通過 this.$refs.xxx.value的形式獲取第二個input框值，只要這兩個input框中存在有問題的情況則直接返回new Error()）.

<el-form-item prop="over">
    <el-input v-model.number="form.over"><span slot="prefix">滿</span></el-input>
    <el-input v-model.number="form.minus" ref="minus"><span slot="prefix">減</span></el-input>
</el-form-item>

  data () {
    var overMinus = (rule, value, callback) => {
      let minus = Number(this.$refs.minus.value)
      // console.log(minus)
      if (!value || !minus) {
        callback(new Error('必填 請輸入數字(不能為0)'))
      }
      setTimeout(() => {
        if (isNaN(value) === true || isNaN(minus) === true) {
          callback(new Error('請輸入數字(不能為0)'))
        } else if (minus >= value) {
          callback(new Error('金額不能高於使用門檻'))
        } else {
          // 最后這個callback()一定要有，否則提交時不能validate
          callback()
        }
      }, 100)
    }
    return {
　　　　form:{
      ......     }
      ......
      rules: {
        over: [
          {required: true, validator: overMinus, trigger: 'change'}
        ]
      }
    }
  }

三、表單提交

實現思路

•html中給el-form增加 ref="form" :model="ruleForm"
•html中給提交按鈕增加點擊事件 @click="submitForm('ruleForm')" （）中對應的為form的:model="ruleForm" 
•js中直接在methods中定義提交事件 submitForm(){}

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" >
//表單項
 <el-form-item label="發貨人電話" prop="phone">
     <el-input class="inp" v-model="form.phone" auto-complete="true"></el-input>
 </el-form-item>、
 ...
 //提交按鈕
 <el-button class="btn-login" type="primary" size="medium" @click="submitForm('ruleForm')">立即登錄</el-button>       
</el-form>

submit (formName) {
      // 表單整體驗證
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          console.log('error submit!!')
          return false
        } else {
          this.form['result'] = this.result
          console.log(this.form)
          // this.$emit('on-close')
        }
      })
    }