@10yun/cv-mobile-ui 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@10yun/cv-mobile-ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "十云cvjs移动端ui，适用uniapp",
   "author": "",
   "license": "Apache-2.0",

package/ui-cv/cv-button/cv-button.vue

@@ -1,32 +1,6 @@
 <template>
   <view class="cv-button-wrap">
-    <button v-if="type == 'pay'" class="cv-button-item cv-button-pay" type="primary" @click="parentClick">{{ label }}</button>
-    <button v-else-if="type == 'save'" class="cv-button-item cv-button-save" type="error" @click="parentClick">
-      {{ label }}
-    </button>
-    <button
-      v-else-if="type == 'submit'"
-      class="cv-button-item cv-button-save"
-      type="primary"
-      form-type="submit"
-      @click="parentClick"
-    >
-      {{ label }}
-    </button>
-    <button
-      v-else-if="type == 'reset'"
-      class="cv-button-item cv-button-cancel"
-      type="primary"
-      form-type="reset"
-      @click="parentClick"
-    >
-      {{ label }}
-    </button>
-    <button v-else-if="type == 'cancel'" class="cv-button-item cv-button-cancel" type="primary" @click="parentClick">
-      {{ label }}
-    </button>
-    <button v-else class="cv-button-item" type="primary" @click="parentClick">{{ label }}</button>
-    <!-- :style="{ background: themesData.color }" -->
+    <button class="cv-button-item" :type="type" :form-type="formType" @click="parentClick"><slot /></button>
   </view>
 </template>
 
@@ -35,15 +9,19 @@ export default {
   name: 'cvButton',
   props: {
     label: {
-      type: String,
-      default: 'save'
+      type: [String],
+      default: 'primary'
     },
     type: {
-      type: String,
+      type: [String],
       default: 'save'
     },
+    formType: {
+      type: [String],
+      default: ''
+    },
     click: {
-      type: Function
+      type: [Function]
     }
   },
   data() {
@@ -84,23 +62,12 @@ export default {
   border-radius: 40px;
 }
 
-.cv-button-pay {
+.cv-button-item2 {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 275px;
   height: 40px;
-  background-color: #62a9df;
-  box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
   margin: 10px auto;
 }
-.cv-button-save {
-  background: #e4393c;
-  background: linear-gradient(to right, #ffa300, #ff8a00, #e95f00);
-}
-.cv-button-cancel {
-  background-color: #fff;
-  border: 1px solid #d4d4d4;
-  color: #202020;
-}
 </style>

package/ui-cv/cv-form-base/cv-form-base.vue

@@ -0,0 +1,470 @@
+<template>
+  <view class="uni-forms" :class="{ 'uni-forms--top': !border }">
+    <form @submit.stop="submitForm" @reset="resetForm">
+      <slot></slot>
+    </form>
+  </view>
+</template>
+
+<script>
+// #ifndef VUE3
+import Vue from 'vue';
+Vue.prototype.binddata = function (name, value, formName) {
+  if (formName) {
+    this.$refs[formName].setValue(name, value);
+  } else {
+    let formVm;
+    for (let i in this.$refs) {
+      const vm = this.$refs[i];
+      if (vm && vm.$options && vm.$options.name === 'uniForms') {
+        formVm = vm;
+        break;
+      }
+    }
+    if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+    formVm.setValue(name, value);
+  }
+};
+// #endif
+
+import Validator from './validate.js';
+/**
+ * Forms 表单
+ * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+ * @property {Object} rules	表单校验规则
+ * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit
+ * @value bind		发生变化时触发
+ * @value submit	提交时触发
+ * @property {String} labelPosition = [top|left]	label 位置 默认 left
+ * @value top		顶部显示 label
+ * @value left	左侧显示 label
+ * @property {String} labelWidth	label 宽度，默认 65px
+ * @property {String} labelAlign = [left|center|right]	label 居中方式  默认 left
+ * @value left		label 左侧显示
+ * @value center	label 居中
+ * @value right		label 右侧对齐
+ * @property {String} errShowType = [undertext|toast|modal]	校验错误信息提示方式
+ * @value undertext	错误信息在底部显示
+ * @value toast			错误信息toast显示
+ * @value modal			错误信息modal显示
+ * @event {Function} submit	提交时触发
+ */
+
+export default {
+  name: 'cvFormBase',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  emits: ['update:modelValue', 'input', 'reset', 'validate', 'submit'],
+  props: {
+    // 即将弃用
+    value: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 替换 value 属性
+    modelValue: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 表单校验规则
+    rules: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 校验触发器方式，默认 关闭
+    validateTrigger: {
+      type: String,
+      default: ''
+    },
+    // label 位置，可选值 top/left
+    labelPosition: {
+      type: String,
+      default: 'left'
+    },
+    // label 宽度，单位 px
+    labelWidth: {
+      type: [String, Number],
+      default: ''
+    },
+    // label 居中方式，可选值 left/center/right
+    labelAlign: {
+      type: String,
+      default: 'left'
+    },
+    errShowType: {
+      type: String,
+      default: 'undertext'
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    line: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      formData: {}
+    };
+  },
+  computed: {
+    dataValue() {
+      if (JSON.stringify(this.modelValue) === '{}') {
+        return this.value;
+      } else {
+        return this.modelValue;
+      }
+    }
+  },
+  watch: {
+    rules(newVal) {
+      // 如果规则发生变化，要初始化组件
+      this.init(newVal);
+    },
+    labelPosition() {
+      this.childrens.forEach((vm) => {
+        vm.init();
+      });
+    }
+  },
+  created() {
+    // #ifdef VUE3
+    let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata;
+    if (!getbinddata) {
+      getApp().$vm.$.appContext.config.globalProperties.binddata = function (name, value, formName) {
+        if (formName) {
+          this.$refs[formName].setValue(name, value);
+        } else {
+          let formVm;
+          for (let i in this.$refs) {
+            const vm = this.$refs[i];
+            if (vm && vm.$options && vm.$options.name === 'uniForms') {
+              formVm = vm;
+              break;
+            }
+          }
+          if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+          formVm.setValue(name, value);
+        }
+      };
+    }
+    // #endif
+
+    // 存放watch 监听数组
+    this.unwatchs = [];
+    // 存放子组件数组
+    this.childrens = [];
+    // 存放 easyInput 组件
+    this.inputChildrens = [];
+    // 存放 dataCheckbox 组件
+    this.checkboxChildrens = [];
+    // 存放规则
+    this.formRules = [];
+    this.init(this.rules);
+  },
+  // mounted() {
+  // 	this.init(this.rules)
+  // },
+  methods: {
+    init(formRules) {
+      // 判断是否有规则
+      if (Object.keys(formRules).length === 0) {
+        this.formData = this.dataValue;
+        return;
+      }
+      this.formRules = formRules;
+      this.validator = new Validator(formRules);
+      this.registerWatch();
+    },
+    // 监听 watch
+    registerWatch() {
+      // 取消监听,避免多次调用 init 重复执行 $watch
+      this.unwatchs.forEach((v) => v());
+      this.childrens.forEach((v) => {
+        v.init();
+      });
+      // watch 每个属性 ，需要知道具体那个属性发变化
+      Object.keys(this.dataValue).forEach((key) => {
+        let watch = this.$watch(
+          'dataValue.' + key,
+          (value) => {
+            if (!value) return;
+            // 如果是对象 ，则平铺内容
+            if (value.toString() === '[object Object]') {
+              for (let i in value) {
+                let name = `${key}[${i}]`;
+                this.formData[name] = this._getValue(name, value[i]);
+              }
+            } else {
+              this.formData[key] = this._getValue(key, value);
+            }
+          },
+          {
+            deep: true,
+            immediate: true
+          }
+        );
+        this.unwatchs.push(watch);
+      });
+    },
+    /**
+     * 公开给用户使用
+     * 设置校验规则
+     * @param {Object} formRules
+     */
+    setRules(formRules) {
+      this.init(formRules);
+    },
+    /**
+     * 公开给用户使用
+     * 设置自定义表单组件 value 值
+     *  @param {String} name 字段名称
+     *  @param {String} value 字段值
+     */
+    setValue(name, value, callback) {
+      let example = this.childrens.find((child) => child.name === name);
+      if (!example) return null;
+      value = this._getValue(example.name, value);
+      this.formData[name] = value;
+      example.val = value;
+      this.$emit('input', Object.assign({}, this.value, this.formData));
+      this.$emit('update:modelValue', Object.assign({}, this.value, this.formData));
+      return example.triggerCheck(value, callback);
+    },
+
+    /**
+     * 表单重置
+     * @param {Object} event
+     */
+    resetForm(event) {
+      this.childrens.forEach((item) => {
+        item.errMsg = '';
+        const inputComp = this.inputChildrens.find((child) => child.rename === item.name);
+        if (inputComp) {
+          inputComp.errMsg = '';
+          inputComp.$emit('input', inputComp.multiple ? [] : '');
+          inputComp.$emit('update:modelValue', inputComp.multiple ? [] : '');
+        }
+      });
+
+      this.childrens.forEach((item) => {
+        if (item.name) {
+          this.formData[item.name] = this._getValue(item.name, '');
+        }
+      });
+
+      this.$emit('input', this.formData);
+      this.$emit('update:modelValue', this.formData);
+      this.$emit('reset', event);
+    },
+
+    /**
+     * 触发表单校验，通过 @validate 获取
+     * @param {Object} validate
+     */
+    validateCheck(validate) {
+      if (validate === null) validate = null;
+      this.$emit('validate', validate);
+    },
+    /**
+     * 校验所有或者部分表单
+     */
+    async validateAll(invalidFields, type, keepitem, callback) {
+      let childrens = [];
+      for (let i in invalidFields) {
+        const item = this.childrens.find((v) => v.name === i);
+        if (item) {
+          childrens.push(item);
+        }
+      }
+
+      if (!callback && typeof keepitem === 'function') {
+        callback = keepitem;
+      }
+
+      let promise;
+      if (!callback && typeof callback !== 'function' && Promise) {
+        promise = new Promise((resolve, reject) => {
+          callback = function (valid, invalidFields) {
+            !valid ? resolve(invalidFields) : reject(valid);
+          };
+        });
+      }
+
+      let results = [];
+      let newFormData = {};
+      if (this.validator) {
+        for (let key in childrens) {
+          const child = childrens[key];
+          let name = child.isArray ? child.arrayField : child.name;
+          if (child.isArray) {
+            if (child.name.indexOf('[') !== -1 && child.name.indexOf(']') !== -1) {
+              const fieldData = child.name.split('[');
+              const fieldName = fieldData[0];
+              const fieldValue = fieldData[1].replace(']', '');
+              if (!newFormData[fieldName]) {
+                newFormData[fieldName] = {};
+              }
+              newFormData[fieldName][fieldValue] = this._getValue(name, invalidFields[name]);
+            }
+          } else {
+            newFormData[name] = this._getValue(name, invalidFields[name]);
+          }
+          const result = await child.triggerCheck(invalidFields[name], true);
+          if (result) {
+            results.push(result);
+            if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
+          }
+        }
+      } else {
+        newFormData = invalidFields;
+      }
+      if (Array.isArray(results)) {
+        if (results.length === 0) results = null;
+      }
+
+      if (Array.isArray(keepitem)) {
+        keepitem.forEach((v) => {
+          newFormData[v] = this.dataValue[v];
+        });
+      }
+
+      if (type === 'submit') {
+        this.$emit('submit', {
+          detail: {
+            value: newFormData,
+            errors: results
+          }
+        });
+      } else {
+        this.$emit('validate', results);
+      }
+
+      callback && typeof callback === 'function' && callback(results, newFormData);
+
+      if (promise && callback) {
+        return promise;
+      } else {
+        return null;
+      }
+    },
+    submitForm() {},
+    /**
+     * 外部调用方法
+     * 手动提交校验表单
+     * 对整个表单进行校验的方法，参数为一个回调函数。
+     */
+    submit(keepitem, callback, type) {
+      for (let i in this.dataValue) {
+        const itemData = this.childrens.find((v) => v.name === i);
+        if (itemData) {
+          if (this.formData[i] === undefined) {
+            this.formData[i] = this._getValue(i, this.dataValue[i]);
+          }
+        }
+      }
+      if (!type) {
+        console.warn('submit 方法即将废弃，请使用validate方法代替！');
+      }
+      return this.validateAll(this.formData, 'submit', keepitem, callback);
+    },
+
+    /**
+     * 外部调用方法
+     * 校验表单
+     * 对整个表单进行校验的方法，参数为一个回调函数。
+     */
+    validate(keepitem, callback) {
+      return this.submit(keepitem, callback, true);
+    },
+
+    /**
+     * 部分表单校验
+     * @param {Object} props
+     * @param {Object} cb
+     */
+    validateField(props, callback) {
+      props = [].concat(props);
+      let invalidFields = {};
+      this.childrens.forEach((item) => {
+        if (props.indexOf(item.name) !== -1) {
+          invalidFields = Object.assign({}, invalidFields, {
+            [item.name]: this.formData[item.name]
+          });
+        }
+      });
+      return this.validateAll(invalidFields, 'submit', [], callback);
+    },
+
+    /**
+     * 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
+     */
+    resetFields() {
+      this.resetForm();
+    },
+
+    /**
+     * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+     */
+    clearValidate(props) {
+      props = [].concat(props);
+      this.childrens.forEach((item) => {
+        const inputComp = this.inputChildrens.find((child) => child.rename === item.name);
+        if (props.length === 0) {
+          item.errMsg = '';
+          if (inputComp) {
+            inputComp.errMsg = '';
+          }
+        } else {
+          if (props.indexOf(item.name) !== -1) {
+            item.errMsg = '';
+            if (inputComp) {
+              inputComp.errMsg = '';
+            }
+          }
+        }
+      });
+    },
+    /**
+     * 把 value 转换成指定的类型
+     * @param {Object} key
+     * @param {Object} value
+     */
+    _getValue(key, value) {
+      const rules = (this.formRules[key] && this.formRules[key].rules) || [];
+      const isRuleNum = rules.find((val) => val.format && this.type_filter(val.format));
+      const isRuleBool = rules.find((val) => (val.format && val.format === 'boolean') || val.format === 'bool');
+      // 输入值为 number
+      if (isRuleNum) {
+        value = isNaN(value) ? value : value === '' || value === null ? null : Number(value);
+      }
+      // 简单判断真假值
+      if (isRuleBool) {
+        value = !value ? false : true;
+      }
+      return value;
+    },
+    /**
+     * 过滤数字类型
+     * @param {Object} format
+     */
+    type_filter(format) {
+      return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/ui-cv/cv-form-base/validate.js

@@ -0,0 +1,477 @@
+var pattern = {
+  email: /^\S+?@\S+?\.\S+?$/,
+  idcard: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+  url: new RegExp(
+    '^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
+    'i'
+  )
+};
+
+const FORMAT_MAPPING = {
+  int: 'integer',
+  bool: 'boolean',
+  double: 'number',
+  long: 'number',
+  password: 'string'
+  // "fileurls": 'array'
+};
+
+function formatMessage(args, resources = '') {
+  var defaultMessage = ['label'];
+  defaultMessage.forEach((item) => {
+    if (args[item] === undefined) {
+      args[item] = '';
+    }
+  });
+
+  let str = resources;
+  for (let key in args) {
+    let reg = new RegExp('{' + key + '}');
+    str = str.replace(reg, args[key]);
+  }
+  return str;
+}
+
+function isEmptyValue(value, type) {
+  if (value === undefined || value === null) {
+    return true;
+  }
+
+  if (typeof value === 'string' && !value) {
+    return true;
+  }
+
+  if (Array.isArray(value) && !value.length) {
+    return true;
+  }
+
+  if (type === 'object' && !Object.keys(value).length) {
+    return true;
+  }
+
+  return false;
+}
+
+const types = {
+  integer(value) {
+    return types.number(value) && parseInt(value, 10) === value;
+  },
+  string(value) {
+    return typeof value === 'string';
+  },
+  number(value) {
+    if (isNaN(value)) {
+      return false;
+    }
+    return typeof value === 'number';
+  },
+  boolean: function (value) {
+    return typeof value === 'boolean';
+  },
+  float: function (value) {
+    return types.number(value) && !types.integer(value);
+  },
+  array(value) {
+    return Array.isArray(value);
+  },
+  object(value) {
+    return typeof value === 'object' && !types.array(value);
+  },
+  date(value) {
+    return value instanceof Date;
+  },
+  timestamp(value) {
+    if (!this.integer(value) || Math.abs(value).toString().length > 16) {
+      return false;
+    }
+    return true;
+  },
+  file(value) {
+    return typeof value.url === 'string';
+  },
+  email(value) {
+    return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
+  },
+  url(value) {
+    return typeof value === 'string' && !!value.match(pattern.url);
+  },
+  pattern(reg, value) {
+    try {
+      return new RegExp(reg).test(value);
+    } catch (e) {
+      return false;
+    }
+  },
+  method(value) {
+    return typeof value === 'function';
+  },
+  idcard(value) {
+    return typeof value === 'string' && !!value.match(pattern.idcard);
+  },
+  'url-https'(value) {
+    return this.url(value) && value.startsWith('https://');
+  },
+  'url-scheme'(value) {
+    return value.startsWith('://');
+  },
+  'url-web'(value) {
+    return false;
+  }
+};
+
+class RuleValidator {
+  constructor(message) {
+    this._message = message;
+  }
+
+  async validateRule(fieldKey, fieldValue, value, data, allData) {
+    var result = null;
+
+    let rules = fieldValue.rules;
+
+    let hasRequired = rules.findIndex((item) => {
+      return item.required;
+    });
+    if (hasRequired < 0) {
+      if (value === null || value === undefined) {
+        return result;
+      }
+      if (typeof value === 'string' && !value.length) {
+        return result;
+      }
+    }
+
+    var message = this._message;
+
+    if (rules === undefined) {
+      return message['default'];
+    }
+
+    for (var i = 0; i < rules.length; i++) {
+      let rule = rules[i];
+      let vt = this._getValidateType(rule);
+
+      Object.assign(rule, {
+        label: fieldValue.label || `["${fieldKey}"]`
+      });
+
+      if (RuleValidatorHelper[vt]) {
+        result = RuleValidatorHelper[vt](rule, value, message);
+        if (result != null) {
+          break;
+        }
+      }
+
+      if (rule.validateExpr) {
+        let now = Date.now();
+        let resultExpr = rule.validateExpr(value, allData, now);
+        if (resultExpr === false) {
+          result = this._getMessage(rule, rule.errorMessage || this._message['default']);
+          break;
+        }
+      }
+
+      if (rule.validateFunction) {
+        result = await this.validateFunction(rule, value, data, allData, vt);
+        if (result !== null) {
+          break;
+        }
+      }
+    }
+
+    if (result !== null) {
+      result = message.TAG + result;
+    }
+
+    return result;
+  }
+
+  async validateFunction(rule, value, data, allData, vt) {
+    let result = null;
+    try {
+      let callbackMessage = null;
+      const res = await rule.validateFunction(rule, value, allData || data, (message) => {
+        callbackMessage = message;
+      });
+      if (callbackMessage || (typeof res === 'string' && res) || res === false) {
+        result = this._getMessage(rule, callbackMessage || res, vt);
+      }
+    } catch (e) {
+      result = this._getMessage(rule, e.message, vt);
+    }
+    return result;
+  }
+
+  _getMessage(rule, message, vt) {
+    return formatMessage(rule, message || rule.errorMessage || this._message[vt] || message['default']);
+  }
+
+  _getValidateType(rule) {
+    var result = '';
+    if (rule.required) {
+      result = 'required';
+    } else if (rule.format) {
+      result = 'format';
+    } else if (rule.arrayType) {
+      result = 'arrayTypeFormat';
+    } else if (rule.range) {
+      result = 'range';
+    } else if (rule.maximum !== undefined || rule.minimum !== undefined) {
+      result = 'rangeNumber';
+    } else if (rule.maxLength !== undefined || rule.minLength !== undefined) {
+      result = 'rangeLength';
+    } else if (rule.pattern) {
+      result = 'pattern';
+    } else if (rule.validateFunction) {
+      result = 'validateFunction';
+    }
+    return result;
+  }
+}
+
+const RuleValidatorHelper = {
+  required(rule, value, message) {
+    if (rule.required && isEmptyValue(value, rule.format || typeof value)) {
+      return formatMessage(rule, rule.errorMessage || message.required);
+    }
+
+    return null;
+  },
+
+  range(rule, value, message) {
+    const { range, errorMessage } = rule;
+
+    let list = new Array(range.length);
+    for (let i = 0; i < range.length; i++) {
+      const item = range[i];
+      if (types.object(item) && item.value !== undefined) {
+        list[i] = item.value;
+      } else {
+        list[i] = item;
+      }
+    }
+
+    let result = false;
+    if (Array.isArray(value)) {
+      result = new Set(value.concat(list)).size === list.length;
+    } else {
+      if (list.indexOf(value) > -1) {
+        result = true;
+      }
+    }
+
+    if (!result) {
+      return formatMessage(rule, errorMessage || message['enum']);
+    }
+
+    return null;
+  },
+
+  rangeNumber(rule, value, message) {
+    if (!types.number(value)) {
+      return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+    }
+
+    let { minimum, maximum, exclusiveMinimum, exclusiveMaximum } = rule;
+    let min = exclusiveMinimum ? value <= minimum : value < minimum;
+    let max = exclusiveMaximum ? value >= maximum : value > maximum;
+
+    if (minimum !== undefined && min) {
+      return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMinimum ? 'exclusiveMinimum' : 'minimum']);
+    } else if (maximum !== undefined && max) {
+      return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMaximum ? 'exclusiveMaximum' : 'maximum']);
+    } else if (minimum !== undefined && maximum !== undefined && (min || max)) {
+      return formatMessage(rule, rule.errorMessage || message['number'].range);
+    }
+
+    return null;
+  },
+
+  rangeLength(rule, value, message) {
+    if (!types.string(value) && !types.array(value)) {
+      return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+    }
+
+    let min = rule.minLength;
+    let max = rule.maxLength;
+    let val = value.length;
+
+    if (min !== undefined && val < min) {
+      return formatMessage(rule, rule.errorMessage || message['length'].minLength);
+    } else if (max !== undefined && val > max) {
+      return formatMessage(rule, rule.errorMessage || message['length'].maxLength);
+    } else if (min !== undefined && max !== undefined && (val < min || val > max)) {
+      return formatMessage(rule, rule.errorMessage || message['length'].range);
+    }
+
+    return null;
+  },
+
+  pattern(rule, value, message) {
+    if (!types['pattern'](rule.pattern, value)) {
+      return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+    }
+
+    return null;
+  },
+
+  format(rule, value, message) {
+    var customTypes = Object.keys(types);
+    var format = FORMAT_MAPPING[rule.format] ? FORMAT_MAPPING[rule.format] : rule.format || rule.arrayType;
+
+    if (customTypes.indexOf(format) > -1) {
+      if (!types[format](value)) {
+        return formatMessage(rule, rule.errorMessage || message.typeError);
+      }
+    }
+
+    return null;
+  },
+
+  arrayTypeFormat(rule, value, message) {
+    if (!Array.isArray(value)) {
+      return formatMessage(rule, rule.errorMessage || message.typeError);
+    }
+
+    for (let i = 0; i < value.length; i++) {
+      const element = value[i];
+      let formatResult = this.format(rule, element, message);
+      if (formatResult !== null) {
+        return formatResult;
+      }
+    }
+
+    return null;
+  }
+};
+
+class SchemaValidator extends RuleValidator {
+  constructor(schema, options) {
+    super(SchemaValidator.message);
+
+    this._schema = schema;
+    this._options = options || null;
+  }
+
+  updateSchema(schema) {
+    this._schema = schema;
+  }
+
+  async validate(data, allData) {
+    let result = this._checkFieldInSchema(data);
+    if (!result) {
+      result = await this.invokeValidate(data, false, allData);
+    }
+    return result.length ? result[0] : null;
+  }
+
+  async validateAll(data, allData) {
+    let result = this._checkFieldInSchema(data);
+    if (!result) {
+      result = await this.invokeValidate(data, true, allData);
+    }
+    return result;
+  }
+
+  async validateUpdate(data, allData) {
+    let result = this._checkFieldInSchema(data);
+    if (!result) {
+      result = await this.invokeValidateUpdate(data, false, allData);
+    }
+    return result.length ? result[0] : null;
+  }
+
+  async invokeValidate(data, all, allData) {
+    let result = [];
+    let schema = this._schema;
+    for (let key in schema) {
+      let value = schema[key];
+      let errorMessage = await this.validateRule(key, value, data[key], data, allData);
+      if (errorMessage != null) {
+        result.push({
+          key,
+          errorMessage
+        });
+        if (!all) break;
+      }
+    }
+    return result;
+  }
+
+  async invokeValidateUpdate(data, all, allData) {
+    let result = [];
+    for (let key in data) {
+      let errorMessage = await this.validateRule(key, this._schema[key], data[key], data, allData);
+      if (errorMessage != null) {
+        result.push({
+          key,
+          errorMessage
+        });
+        if (!all) break;
+      }
+    }
+    return result;
+  }
+
+  _checkFieldInSchema(data) {
+    var keys = Object.keys(data);
+    var keys2 = Object.keys(this._schema);
+    if (new Set(keys.concat(keys2)).size === keys2.length) {
+      return '';
+    }
+
+    var noExistFields = keys.filter((key) => {
+      return keys2.indexOf(key) < 0;
+    });
+    var errorMessage = formatMessage(
+      {
+        field: JSON.stringify(noExistFields)
+      },
+      SchemaValidator.message.TAG + SchemaValidator.message['defaultInvalid']
+    );
+    return [
+      {
+        key: 'invalid',
+        errorMessage
+      }
+    ];
+  }
+}
+
+function Message() {
+  return {
+    TAG: '',
+    default: '验证错误',
+    defaultInvalid: '提交的字段{field}在数据库中并不存在',
+    validateFunction: '验证无效',
+    required: '{label}必填',
+    enum: '{label}超出范围',
+    timestamp: '{label}格式无效',
+    whitespace: '{label}不能为空',
+    typeError: '{label}类型无效',
+    date: {
+      format: '{label}日期{value}格式无效',
+      parse: '{label}日期无法解析,{value}无效',
+      invalid: '{label}日期{value}无效'
+    },
+    length: {
+      minLength: '{label}长度不能少于{minLength}',
+      maxLength: '{label}长度不能超过{maxLength}',
+      range: '{label}必须介于{minLength}和{maxLength}之间'
+    },
+    number: {
+      minimum: '{label}不能小于{minimum}',
+      maximum: '{label}不能大于{maximum}',
+      exclusiveMinimum: '{label}不能小于等于{minimum}',
+      exclusiveMaximum: '{label}不能大于等于{maximum}',
+      range: '{label}必须介于{minimum}and{maximum}之间'
+    },
+    pattern: {
+      mismatch: '{label}格式不匹配'
+    }
+  };
+}
+
+SchemaValidator.message = new Message();
+
+export default SchemaValidator;

package/ui-cv/cv-textarea/cv-textarea.vue

@@ -94,6 +94,7 @@ export default {
   padding: 9px;
   align-items: stretch;
   align-content: flex-start;
+  margin-top: 5px;
 }
 .cv-textarea__box {
   flex: 1;