关于VUE项目根据后台返回的手机号和身份证号做正则校验

Vue3中，我们可以利用现有的验证库或者自定义正则表达式来进行身份证号和手机号码的校验。以下是一个简单的示例： ### 身份证号码验证 身份证号通常有18位数字，可以使用正则表达式进行匹配。这是一个基本的例子： ```javascript import { validate } from 'vue-validator'; const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; // 在模板中使用v-model和validate-field <template> <div> <input type="text" v-model="id" @blur="validateId" /> <span v-if="$v.id.$error.required">身份证不能为空</span> <span v-if="$v.id.$error.pattern">请输入有效的身份证号</span> </div> </template> <script setup> import { useForm } from 'vee-validate'; import { ref } from 'vue'; const form = useForm(); const id = ref(''); form.field('id', { rules: [{ required: true, message: '身份证不能为空' }, { pattern: idCardPattern, message: '请输入有效的身份证号' }], }); async function validateId() { if (form.validateField('id')) { // 验证通过后的处理... } } </script> ``` ### 手机号码验证 手机号码的格式各地可能会有所不同，通常包含区号+号码，可以用以下正则表达式： ```javascript const phonePattern = /^1(3|4|5|7|8)[0-9]{9}$/; // 示例为中国大陆手机号 ... <form> <input type="text" v-model="phone" @blur="validatePhone" /> <span v-if="$v.phone.$error.required">手机号不能为空</span> <span v-if="$v.phone.$error.pattern">请输入有效的手机号码</span> </template> <script setup> ... form.field('phone', { rules: [{ required: true, message: '手机号不能为空' }, { pattern: phonePattern, message: '请输入有效的手机号码' }], }); ... function validatePhone() { if (form.validateField('phone')) { // 验证通过后的处理... } } </script> ```