el-form-item校验座机电话
时间: 2023-12-06 08:35:48 浏览: 90
el-table嵌套 el-form并且加正则校验
以下是使用element-ui的el-form-item校验座机电话的代码:
```html
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="联系电话" prop="telephone">
<el-input v-model="form.telephone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
telephone: ''
},
rules: {
telephone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{
validator: (rule, value, callback) => {
const reg = /^0\d{2,3}-\d{7,8}$/;
if (!reg.test(value)) {
callback(new Error('请输入正确的座机电话'));
} else {
callback();
}
},
trigger: 'blur'
}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert('校验成功');
} else {
alert('校验失败');
return false;
}
});
}
}
};
</script>
```
阅读全文