el-input正则校验手机号怎么使用
时间: 2023-11-07 16:58:00 浏览: 98
vue:el-input输入时限制输入的类型操作
5星 · 资源好评率100%
可以使用`el-input`的`pattern`属性来实现手机号的正则校验。具体实现步骤如下:
1. 在`el-input`中添加`pattern`属性,值为手机号的正则表达式。
```html
<el-input v-model="mobile" placeholder="请输入手机号" pattern="^1[3456789]\d{9}$"></el-input>
```
2. 在`el-form-item`中添加`rules`属性,值为一个数组,数组中每个对象表示一条校验规则。
```html
<el-form-item label="手机号" prop="mobile" :rules="[{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
<el-input v-model="mobile" placeholder="请输入手机号" pattern="^1[3456789]\d{9}$"></el-input>
</el-form-item>
```
其中,`pattern`表示校验的正则表达式,`message`表示校验失败时的提示信息,`trigger`表示校验的时机,这里设为失去焦点时触发。
阅读全文