elementui 自定义表单验证邮箱、电话号码

拼搏现实的明天。 2022-03-11 10:16 1074阅读 0赞

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' }
        ]
      }
    }