[JavaScript知识库]浅谈ElementUI中的rules

表单验证的步骤：

1. 给 form 设置属性 :rules :rules
2. 同时给需要验证的每个form-item设置属性 prop，指向对应字段即可 prop=""
3. form标签里用v-model双向绑定页面数据。
4. form标签里添加ref,在这个范围内规则才生效，可以理解为id。
5. 在提交或保存时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean表示成功与失败。

代码如下：

<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 >