vue + element-ui 实现表单验证模板

template

<template>
    <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
    >
    
    <el-form-item label="调整单据" prop="changeBill">
        <el-input v-model="changeBill">
    </el-form-item>
    
    <el-button type="primary" @click="submit('ruleForm')"></el-button>
    </el-form>
</template>

data

  export default{
        data(){
            const validChangeBill = (rule,value,callback)=>{
                if(!value){
                    callback(new Error("改内容不能为空"))
                }else{
                    callback()
                }
            }
            return{
                 rules: {
                    changeBill: [
                      {validator:validChangeBill, required: true, trigger: ["blur","change"] }
                        ]
                  },
                  changeBill:""
            }
        },
        }
    }

methods

methods:{
            submit(ruleForm){
              this.$refs.[ruleForm].validate(valid => {
                if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
              })
            }