vue3中elmentui的表单自定义验证

最新推荐文章于 2024-10-08 08:59:33 发布

PXYC_J

最新推荐文章于 2024-10-08 08:59:33 发布

阅读量527

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_39536826/article/details/130051837

版权

**要求：**自定义验证身份证是否符合是有效身份证
看点1、自定义验证身份证
2、vue3中ref的使用
3、路由跳转使用
在这里插入图片描述

1、结构

<el-form :model="testForm" :rules="rules" ref="formTestRef" label-width="6.5rem">
		<el-form-item label="身份证号:" prop="cardId">
          <el-input v-model="testForm.cardId"></el-input>
        </el-form-item>
</el-form>
<div class="start-test">
  <el-button type="primary" @click="submitForm">开始考试</el-button>
</div>

2、js

import { useRouter } from "vue-router";
const testForm = reactive({
  cardId: '',
})

// 正则验证是否是有效身份证
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入身份证号'))
  } else {
    if (!reg.test(value)) {
      callback(new Error('请输入正确身份证号'))
    }
    if (testForm.cardId !== '') {
      if (!formTestRef.value) return
      formTestRef.value.validateField('cardId', () => null)
      callback()
    }
  }
}

// 表单验证 validator: validatePass,为自定义验证
const rules = ref({
  cardId: [{  required: true, validator: validatePass, trigger: 'blur' }],
})

// 根据结构中的ref="formTestRef"获取表单
const formTestRef = ref()
// 提交时验证表单
const submitForm = () => {
  formTestRef.value.validate(valid => {
    if(valid) {
      console.log("验证通过",testForm);
      // 通过验证跳转路由
      router.push({
        path: "/safetyExam",
        // query: {
        //   equipmentType,
        //   dwmc: form.dwmc,
        //   dwLevelCode: form.dwLevelCode,
        // },
      });


    }
  })
}