elementui验证手机号
时间: 2023-09-06 12:14:29 浏览: 122
验证手机号码
5星 · 资源好评率100%
Element UI 提供了一个名为 `el-form` 的组件,可以结合 `el-form-item` 和 `el-input` 来进行表单验证。要验证手机号码,你可以使用 `el-form` 的 `rules` 属性来定义验证规则,并且通过 `el-form-item` 的 `prop` 属性来指定要验证的字段。下面是一个示例代码:
```html
<template>
<el-form :model="formData" :rules="formRules" ref="form" label-width="100px">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formData.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
mobile: ''
},
formRules: {
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过,可以继续处理提交逻辑
console.log('表单验证通过');
} else {
// 表单验证失败,进行错误处理
console.log('表单验证失败');
}
});
}
}
};
</script>
```
在上面的代码中,`formData` 是表单数据对象,`formRules` 是验证规则对象。手机号的验证规则定义为必填项,并且使用正则表达式进行格式校验。在点击提交按钮时,调用 `this.$refs.form.validate` 方法进行表单验证,通过回调函数判断验证是否通过。如果验证通过,可以继续处理提交逻辑;如果验证失败,可以进行错误处理。
以上是一个使用 Element UI 进行手机号验证的示例代码,你可以根据自己的实际需求进行适当调整。
阅读全文