1.html部分:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
<el-form-item label="联系电话:" prop="buyerPhone" required>
<el-input v-model="ruleForm.buyerPhone"></el-input>
</el-form-item>
<el-form-item label="Email:" prop="buyerEmail" required>
<el-input v-model="ruleForm.buyerEmail"></el-input>
</el-form-item>
</el-form>
2.js部分:
data () {
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
if (!value) {
return callback(new Error('电话号码不能为空'))
}
setTimeout(() => {
// Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
// 所以在前面加了一个+实现隐式转换
if (!Number.isInteger(+value)) {
callback(new Error('请输入数字值'))
} else {
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话号码格式不正确'))
}
}
}, 100)
}
var checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (!value) {
return callback(new Error('邮箱不能为空'))
}
setTimeout(() => {
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
}, 100)
}
return {
ruleForm: {
buyerPhone: '',
buyerEmail: ''
},
rules: {
buyerPhone: [
{ validator: checkPhone, trigger: 'blur' }
],
buyerEmail: [
{ validator: checkEmail, trigger: 'blur' }
]
}
}