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

赫兹/Herzz

已于 2024-01-31 14:04:20 修改

阅读量1k

点赞数 9

文章标签： vue.js 前端 javascript

于 2024-01-31 14:03:31 首次发布

本文链接：https://blog.csdn.net/HanXiaoXi_yeal/article/details/135952119

版权

本文介绍了如何在JavaScript中创建一个函数，用于校验输入框中的字符长度，当输入超过设定的最大长度时提供错误提示。该函数接受rule对象、值、回调和文本长度规则作为参数，适用于表单验证组件。

摘要由CSDN通过智能技术生成

需求：校验字符长度，超过后仍可输入，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 }],
}