AI倒是贴心的把相关代码都给写好了：
<template>
<el-form
odel="formData" ref="formRef" @submit.native.prevent="submitForm">
<el-form-item label="报告者电话*" prop="Phone">
<el-input
type="text"
v-model.trim="formData.Phone"
maxlength="12"
@input="validatePhone"
></el-input>
<span class="help-block">(请填写手机或固定电话。)</span>
<span class="error-message" v-if="errors.has('Phone')">{{ errors.first('Phone') }}</span>
</el-form-item>
<el-button type="primary" native-type="submit">提交</el-button>
</el-form>
</template>
<script>
// 引入 VeeValidate 相关的配置
import { extend, required, ValidationObserver, ValidationProvider, configure } from 'vee-validate';
import { required as requiredRule, maxLength, regex } from 'vee-validate/dist/rules';
// 自定义规则：手机号或固定电话
extend('phoneOrLandline', {
params: ['maxLength'],
validate(value, { maxLength }) {
// 手机号正则表达式
const mobileRegex = /^1[3-9]\d{9}$/;
// 固定电话正则表达式（这里假设区号3-4位，号码7-8位）
const landlineRegex = /^\d{3,4}-\d{7,8}$/;
// 合并的验证逻辑（也考虑连续11位或12位数字的固定电话格式）
const combinedRegex = /^(1[3-9]\d{9}|\d{3,4}-\d{7,8}|\d{11,12})$/;
return combinedRegex.test(value) && value.length <= maxLength;
},
message: '请输入有效的手机号或固定电话号码'
});
// 配置 VeeValidate
configure({
generateMessage: (ctx) => ctx.field + ' ' + ctx.msg,
classes: {
valid: 'is-valid',
invalid: 'is-invalid',
dirty: 'is-dirty'
}
});
export default {
data() {
return {
formData: {
Phone: ''
}
};
},
methods: {
submitForm() {
this.$refs.observer.validate().then((valid) => {
if (valid) {
alert('提交成功！');
}
});
},
validatePhone(value) {
// 这里可以调用自定义的验证函数或者逻辑，但在这个例子中，我们使用 VeeValidate 的表单验证
}
},
components: {
ValidationObserver,
ValidationProvider
}
};
</script>
<!-- 注意：你需要在你的 Vue 组件的模板中包裹 ValidationObserver -->
<!-- 但在上面的示例中，我省略了它以保持简洁 -->
<!-- 通常在 el-form 上使用 v-slot 来包裹 ValidationObserver -->
