新增表单验证方法，引入在rule的validator调用

children117cl

2021-05-13 d8cbe91e52f94572f66e0c23c6c75737143f2b08

新增表单验证方法，引入在rule的validator调用

 src/components/WangEnduit/index.vue

@@ -87,7 +87,7 @@
      formData.append('file', files[0])
      self.postFN(
        {
          url: 'admin/image/upload',
          url: 'admin/image/upload?folderCode=IMG',
          header: { 'Content-Type': 'multipart/form-data' },
          params: formData,
          mockData: {

 src/styles/element-ui.scss

@@ -108,4 +108,17 @@
  .el-upload-list__item-thumbnail{
      object-fit: contain;
  }
}
}

// 评价组件
.mini-star .el-rate__icon{
  margin-right: 0;
}
.large-star .el-rate{
  line-height: 32px;
}
.large-star .el-rate__icon{
  font-size: 26px;
  margin-right: 0;
  line-height: 32px;
}

 src/utils/form_rules_validators.js

New file
@@ -0,0 +1,95 @@
/**
 * 通用生成表单规则验证
 */
import form_validate from './form_validate'

/**
 * @description 设置页面数据，通常用来清空数据
 * @example setData.call(this)
 * @param {string} key 设置的字段
 * @param {object} context 使用this.$set时需要用的域
 * @param {*} value 设置的值
 */
// function $setData(key, context, value) {
//   if (context) {
//     this.$set(context, key, value)
//   } else {
//     this[key] = value
//   }
// }

/**
 * @description 创建本文件的生成validator方法
 * @param {string} validateName 在 form_validate.js 中的键值
 * @param {string} def_tips 默认提示
 * @returns {function}
 */
function createValidatorFn(validateName, def_tips) {
  return function(tips = def_tips) {
    return (rule, _value, callback) => {
      if (!form_validate[validateName](_value)) {
        // 阻止提交
        callback(new Error(tips))
      } else {
        callback()
      }
    }
  }
}

export default {
  /**
   * @description 验证电子邮箱
   * @example form_rules_validators.validatorEmail.call(this, tips)
   * @param {string} key 设置的字段，必填
   * @param {objext} context 使用this.$set时需要用的域
   * @param {*} value 不为undefined，作为重置该字段的值
   * @param {string} tips 提示文案
   * @returns {function} 返回一个validator
   */
  validatorEmail: createValidatorFn('validateEmail', '电子邮箱格式不正确'),

  /**
   * @description 验证手机号码
   * @example form_rules_validators.validatorMobilePhoneNumber.call(this, tips)
   * @param {string} key 设置的字段，必填
   * @param {objext} context 使用this.$set时需要用的域
   * @param {*} value 不为undefined，作为重置该字段的值
   * @param {string} tips 提示文案
   * @returns {function} 返回一个validator
   */
  validatorMobilePhoneNumber: createValidatorFn('validateMobilePhoneNumber', '手机号码格式不正确'),

  /**
   * @description 验证金额
   * @example form_rules_validators.validatorMoney.call(this, tips)
   * @param {string} key 设置的字段，必填
   * @param {objext} context 使用this.$set时需要用的域
   * @param {*} value 不为undefined，作为重置该字段的值
   * @param {string} tips 提示文案
   * @returns {function} 返回一个validator
   */
  validatorMoney: createValidatorFn('validateMoney', '金额格式不正确'),

  /**
   * @description 验证正整数
   * @example form_rules_validators.validatorMoney.call(this, tips)
   * @param {string} key 设置的字段，必填
   * @param {objext} context 使用this.$set时需要用的域
   * @param {*} value 不为undefined，作为重置该字段的值
   * @param {string} tips 提示文案
   * @returns {function} 返回一个validator
   */
  validatorPlusInt: createValidatorFn('validatePlusInt', '必须为正整数'),

  /**
   * @description 验证大于等于0的整数
   * @example form_rules_validators.validatorMoney.call(this, tips)
   * @param {string} key 设置的字段，必填
   * @param {objext} context 使用this.$set时需要用的域
   * @param {*} value 不为undefined，作为重置该字段的值
   * @param {string} tips 提示文案
   * @returns {function} 返回一个validator
   */
  validatorPlusIntAndZero: createValidatorFn('validatePlusIntAndZero', '必须为大于等于0的整数')
}

 src/utils/form_validate.js

@@ -1,10 +1,12 @@
/**
 * 通用表单验证
 */

export default {
  /**
   * 验证电子邮箱
   * @param {string} value 电子邮箱字符串
   * @returns {boolean}
   */
  validateEmail(value) {
    return /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)
@@ -12,10 +14,38 @@

  /**
   * 验证手机号码
   * @param {string} value 手机号码
   * @param {string|number} value 手机号码
   * @returns {boolean}
   */
  validateMobilePhoneNumber(value) {
    return /^1[0-9][0-9]\d{8}$/.test(value)
    return /^1[0-9][0-9]\d{8}$/.test(value + '')
  },

  /**
   * 验证金额，允许0
   * @param {string|number} value 金额
   * @returns {boolean}
   */
  validateMoney(value) {
    return /^0|[1-9][0-9]*(\.\d{2})?$/.test(value + '')
  },

  /**
   * 验证正整数，不允许0
   * @param {string|number} value 数字
   * @returns {boolean}
   */
  validatePlusInt(value) {
    return /^[1-9][0-9]*$/.test(value + '')
  },

  /**
   * 验证正整数，允许0
   * @param {string|number} value 数字
   * @returns {boolean}
   */
  validatePlusIntAndZero(value) {
    return /^[0-9][0-9]*$/.test(value + '')
  }
}