el-form表单验证规则rules配置参数说明

在el-form上面添加下面这三个属性

:model="ruleForm" :rules="rules"  ref="ruleForm"   
:model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象 
:rules="rules" 是动态绑定的rules，表单验证规则 
ref="ruleForm"  是我们绑定的对象 

data(){ 
return{ 
rules: { 
    name:[{ 
        required: true, 
        message: '请输入用户名', 
        trigger: 'blur' 
        },{ 
        min: 2, 
        max: 5, 
        message: '长度在 2 到 5 个字符' 
        },{ 
        pattern: /^[\u4E00-\u9FA5]+$/, 
        message: '用户名只能为中文' 
    } 
        //{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'} 
    ], 
    password: [{ 
        required: true, 
        message: '请输入密码', 
        trigger: 'blur' 
    }, { 
        min: 6, 
        max: 30, 
        message: '长度在 6 到 30 个字符' 
    }, { 
        pattern: /^(\w){6,20}$/, 
        message: '只能输入6-20个字母、数字、下划线' 
    }], 
    mobile:[{  
        required: true, 
        message: '请输入手机号码', 
        trigger: 'blur' 
    }, 
    {validator:function(rule,value,callback){ 
            if(/^1[34578]\d{9}$/.test(value) == false){ 
                callback(new Error("请输入正确的手机号")); 
            }else{ 
                callback(); 
            } 
        }, trigger: 'blur'} 
    ], 
    //   pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' } 
    peopleID:[{ 
        required: true, 
        message: '请输入身份证ID', 
        trigger: 'blur' 
        },{ 
           pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确'  
        } 
    ], 
    carId:[ 
        {required: true, message: '请输入车牌号', trigger: 'blur'},  
        {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/, 
         message: '常规格式：晋B12345'}, 
    ], 
}, 
} 
} 

<el-form :rules="rules" 
          :model="ruleForm" 
          ref="formRef" 
          label-position="right"> 
     <el-form-item label="车牌号：" 
                   label-width="80px" 
                   prop="plate_number"> 
        <el-input v-model="ruleForm.plate_number"></el-input> 
     </el-form-item> 
</el-form> 
<el-button type="primary" @click="addOrderSubmit(ruleForm)">确定</el-button> 
<script lang="ts"> 
import { defineComponent, ref, reactive, watch, onMounted, unref } from "vue"; 
export default defineComponent({ 
    setup(){ 
        //定义ref 
        const formRef = ref(); 
        //存放表单数据 
        const ruleForm = reactive({plate_number: ""}); 
        //新增订单校验规则 
        const rules = reactive({ 
            plate_number: [{ validator: validatePlate }], 
        }); 
        function addOrderSubmit(e) { 
            //此处的valid为validate函数的回调参数，返回一个布尔值 
            formRef.value.validate((valid: any) => { 
            if (valid) { 
                console.log("成功回调") 
            } else { 
            return false; 
        } 
      }); 
    } 
    } 
}) 
</script >