vue form表单校验电话号码格式
时间: 2024-09-17 11:10:00 浏览: 81
在Vue.js中,处理表单校验通常使用`v-model`指令配合`v-bind:class`属性来进行。对于电话号码格式的验证,可以创建一个自定义的验证规则函数,并结合正则表达式来判断输入是否符合特定格式。
例如,你可以创建一个名为`validatePhoneNumber`的验证规则,用于检查输入是否只包含数字、区号和星号:
```javascript
// 定义一个全局的验证函数
const phoneRegex = /^(\+\d{1,3}[-\s]?)?(\(?\d{3}\)?[-\s]?)?\d{3}[-\s]?\d{4}$/;
Vue.extend({
data() {
return {
phoneNumber: '',
errors: {},
};
},
validations: {
phoneNumber: {
validatePhoneNumber(value) {
this.errors.phoneNumber = !phoneRegex.test(value) ? '请输入正确的电话号码' : undefined;
return !this.errors.phoneNumber;
}
}
},
});
// 使用自定义验证规则
<form v-model="form" @submit.prevent="onSubmit">
<input type="text" v-model="phoneNumber" placeholder="电话号码" :class="{ 'is-invalid': errors.phoneNumber }"/>
<span v-if="errors.phoneNumber">{{ errors.phoneNumber }}</span>
<button type="submit" :disabled="!form.$valid">提交</button>
</form>