VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
步骤:封装验证规则:export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/return reg.test(phone)}表单中定义验证:<el-form ref="form" :inline="true" :model="form"
·
步骤:
封装验证规则:
export function isvalidPhone(phone) {
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
return reg.test(phone)
}
表单中定义验证:
<el-dialog title="新增用户" :visible.sync="dialogFormVisible">
<el-form ref="ruleForm" :inline="true" :model="form" :rules="rules" size="small">
<el-form-item label="电话" prop="phone">
<el-input v-model.number="form.phone" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</div>
</el-dialog>
组件中引入封装好的验证规则:
import { isvalidPhone } from '@/utils/validate'
自定义验证:
data() {
// 自定义验证
const validPhone = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入电话号码'))
} else if (!isvalidPhone(value)) { //判断用户输入的值是否符合规则
callback(new Error('请输入正确的11位手机号码'))
} else {
callback()
}
}
return {
dialogFormVisible: false,
form: {
phone: null
},
rules: {
phone: [
{ required: true, trigger: 'blur', validator: validPhone } //写入验证器
]
}
}
}
点击按钮进行校验:
methods: {
// 表单验证
submitForm(formName) {
this.$refs[formName].validate((valid) => { //重点是ref绑定必须一致
if (valid) {
alert('submit!')
this.dialogFormVisible = false
} else {
console.log('error submit!!')
return false
}
})
}
}
看效果:
电话号码为空时
电话号码格式错误时
后续会一直更新各种常见验证,关注一下了解更多。
更多推荐
已为社区贡献32条内容
所有评论(0)