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[34578]\d{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' }]}}
