//校验手机 checkPhone(rule, value, callback){ if (value) { let isPhone = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/; let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; if (!reg.test(value) && !isPhone.test(value) && value) { callback(new Error("请输入正确的手机号")); } else { callback(); } } else { callback(); } }, rules: { telephone:[ { validator:(rule, value, callback) => checkPhone(rule, value, callback),trigger: "change" }, ] }, 怎么把checkPhone方法放到rules: { telephone:[]}
时间: 2024-03-20 07:41:10 浏览: 28
可以将checkPhone方法直接放到rules: { telephone:[] } 中的数组中,作为一个单独的验证器对象。具体代码如下:
```
rules: {
telephone: [
{
validator: (rule, value, callback) => {
if (value) {
let isPhone = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
if (!reg.test(value) && !isPhone.test(value) && value) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
} else {
callback();
}
},
trigger: "change"
}
]
}
```
这样就可以在使用该验证器时直接调用checkPhone方法了。
相关问题
vue前端校验手机号格式代码
在vue中校验手机号格式可以使用正则表达式进行判断,代码如下:
```javascript
// 定义手机号校验的正则表达式
const phoneReg = /^1[3-9]\d{9}$/;
// 在vue的methods中定义校验手机号的方法
methods: {
// 校验手机号格式
checkPhone(phone) {
return phoneReg.test(phone);
}
}
```
在模板中可以通过v-model绑定手机号码输入框的值,并在提交表单时调用checkPhone方法进行校验,如下:
```html
<template>
<div>
<input type="tel" v-model="phone">
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
phone: ''
}
},
methods: {
// 校验手机号格式
checkPhone(phone) {
const phoneReg = /^1[3-9]\d{9}$/;
return phoneReg.test(phone);
},
// 提交表单
submit() {
if (!this.checkPhone(this.phone)) {
alert('请输入正确的手机号码');
return;
}
// 提交表单逻辑
}
}
}
</script>
```
el-input正则校验手机号怎么使用
你可以使用el-input组件的属性validator来实现正则校验手机号。具体步骤如下:
1. 在el-input组件中设置validator属性,将其值设置为一个函数。
```
<el-input v-model="phone" placeholder="请输入手机号" :validator="checkPhone"></el-input>
```
2. 在methods中定义checkPhone函数,使用正则表达式判断手机号是否合法,并返回一个布尔值。
```
methods: {
checkPhone(rule, value, callback) {
const phoneReg = /^1[3456789]\d{9}$/;
if (!phoneReg.test(value)) {
callback(new Error('手机号格式不正确'));
} else {
callback();
}
}
}
```
3. 当输入手机号时,输入框会自动调用checkPhone函数进行校验,如果手机号不合法,会返回一个错误信息,否则返回null。
完整代码如下:
```
<template>
<div>
<el-input v-model="phone" placeholder="请输入手机号" :validator="checkPhone"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
phone: ''
}
},
methods: {
checkPhone(rule, value, callback) {
const phoneReg = /^1[3456789]\d{9}$/;
if (!phoneReg.test(value)) {
callback(new Error('手机号格式不正确'));
} else {
callback();
}
}
}
}
</script>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)