表单验证的步骤:

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

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐