element表单正则校验

校验 车牌

var validateplateNumber = (rule, vehicleNumber, callback) => {
  var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/

  var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/

  if (vehicleNumber.length == 7) {
    if (!creg.test(vehicleNumber)) {
      callback(new Error('请输入正确格式的车牌号码'))
    } else {
      // else callback必须写 
      callback()
    }
    // return creg.test(vehicleNumber)
  } else if (vehicleNumber.length == 8) {
    // return xreg.test(vehicleNumber)
    if (!xreg.test(vehicleNumber)) {
      callback(new Error('请输入正确格式的车牌号码'))
    } else {
      callback()
    }
  } else {
    // return false
    callback(new Error('请输入正确格式的车牌号码'))
  }
}

校验 0.0-5.0

var validateStar = (rule, value, callback) => {
  var xreg = /^([0-4]\.[0-9]|5\.0)$/
  console.log('xreg test:', xreg.test(value))
  if (!xreg.test(value)) {
    callback(new Error('请输入正确格式和范围的星级'))
  } else {
    callback()
  }
}

rules: {
       plateNumber: [
         { required: true, message: '车牌号码不能为空', trigger: 'blur' },
         { required: true, validator: validateplateNumber, trigger: 'blur' }
       ],
       starLevel: [
         { required: true, message: '司机星级不能为空', trigger: 'blur' },
         { required: true, validator: validateStar, trigger: 'blur' }
       ]
 },

视图层

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车牌" prop="plateNumber">
          <el-input v-model="form.plateNumber" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="星级" prop="starLevel">
          <el-input v-model="form.starLevel" placeholder="请输入司机星级 0.0~5.0" />
          <span style="font-size:12px;">星级正确填写格式：0.0 - 5.0</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

 submitForm () {
      this.$refs['form'].validate(valid => { //通过自定义校验 如果不返回callback 无法进入这里
        if (valid) {
          alert(valid)
          if (this.form.driverId != null) {
            updateDriver(this.form).then(response => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addDriver(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

这里在自定义校验方法中，如果只针对有问题进行callback，整齐不返回。
submitForm 提交表单 正确形式 无法进入校验 this.$refs['form'].validate(valid =>