校验规则
const nameRules = [
{ required: true, message: '请输入姓名' },
{ pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/, message: '中文2-16个字符' }
]
const idCardRules = [
{ required: true, message: '请输入身份证号' },
{
pattern:
/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
message: '身份证号不正确'
}
]
export { nameRules, idCardRules }
<!-- 表单 -->
<van-form ref="form">
<van-field
:rules="idCardRules" 校验规则
v-model="patient.idCard"
label="身份证号"
placeholder="请输入身份证号"
/>
<van-field label="性别" class="pb4">
<!-- 单选按钮组件 -->
<template #input>
<cp-radio-btn
v-model:gender="patient.gender"
:options="options"
></cp-radio-btn>
</template>
</van-field>
</van-form>
import { nameRules, idCardRules } from '@/utils/rules'
import { showConfirmDialog, type FormInstance } from 'vant'
// 5.点击保存表单
const form = ref<FormInstance>()//获取表单dom
const submit = async () => {
// 整体校验
await form.value?.validate()
// 校验通过
// 性别需要和身份证包含性别填写的一致,确认框提示
// 身份证倒数第二位,单数是男,双数是女
// slice已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。(不会改变原数组)
const gender = +patient.value.idCard.slice(-2, -1) % 2
if (gender !== patient.value.gender) {
await showConfirmDialog({
title: '温馨提示',
message: '填写的性别和身份证号中的不一致\n您确认提交吗?'
})
}
console.log('通过校验')
}