VUE3+elementPlus 之 Form表单校验器 之 字符长度校验

需求：校验字符长度，超过后仍可输入，error提示录入字符数与限制字符数

校验字符长度：

/**
 * 检验文字输入区的长度
 * @param {*} rule                输入框的rule 对象，field：字段名称
 * @param {*} value               输入框的内容
 * @param {*} callback            回调函数
 * @param {*} textLengthRules     文本长度校验规则对象， key：字段名称，value：字段允许最大长度
 * @returns
 */
export function validTextField(rule: any, value: any, callback: any, textLengthRules: any) {
   
  if (!value) {
   
    callback();
    return;
  }
  const field = rule.field;
  const arr = field.split(".");
  // 表单列表内容校验
  if (arr.length > 0) {
   
    const len = textLengthRules[arr[0]][arr[arr.length - 1]];
    if (value.length > len) {
   
      callback(new Error(`${
     value.length}/${
     len} 内容输入超出范围`));
      return;
    }
  }

  // 支持字段校验
  if (textLengthRules?.[field] && value.length > textLengthRules[field]) {
   
    callback(new Error(`${
     value.length}/${
     textLengthRules[field]} 内容输入超出范围`));
    return;
  }
  callback();
}

组件内使用：

const textLengthRules = {
   
  num: 15
};
const validTextLength = (rule: any, value: any, callback: any) => {
   
  validTextField(rule, value, callback, textLengthRules);
};
rules: {
   
	num: [{
    validator: validTextLength }],
}

页面效果：