elementUI表单校验——自定义验证

自定义验证

<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;
        }
      });
 }