自定義驗證

<el-form ref="withdraw" :model="withdraw" :rules="rules">
    <el-form-item label="提現金額：" prop="amount" label-width="200px">
        <el-row :gutter="5">
            <el-col :lg="6" :xs="24">
                <el-input v-model="withdraw.amount"></el-input>
            </el-col
 
>
            <el-col :lg="2" :xs="24">元</el-col>
            <el-col :lg="13" :xs="24" style="color: #A9B1BC">
            （提現上限{{account.usableBalance}}元）</el-col>
        </el-row>
    </el-form-item>
</el-form>
<el-button type="primary" @click="confirmWithdraw('withdraw')"
 
>確 定</el-button>
<script>
new Vue({
    el: '#app',
    data: function() {
        /* 自定義表單校驗 */
        var validateAmount = (rule, value, callback) => {
            if(value === ''){
                 callback(new Error('請輸入提現金額'));
            }else if(value === '0'){
                 callback(new
 
 Error('提現金額不能為0'));
            }else if (value > this.account.usableBalance) {
                console.log(value);
              callback(new Error('提現金額不能大於可用餘額！'));
            } else {
              callback();
            }
        };
        return {
            account: {
               usableBalance: '2000'
            },
            withdraw: {
              amount: ''
            },
            rules: {
                amount :[
                         { validator: validateAmount, trigger:'blur'}
                         ]
            }
        }
   }
});
</script>

關鍵點

1. 表單名稱 ref=”withdraw”
2. 表單繫結 :rules=rules
3. el-form-item prop屬性
4. validateAmount方法
5. 提交方法：

confirmWithdraw(formName){
        this.$refs[formName].validate((valid) => {
        if (valid) {
           console.log('success submit!!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
 }