VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入_element ui form error 显示方式(1)

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

我的项目中使用校验比较多，所以进行简单的封装：
新建js文件写入下面的函数

export function valieTextLength(rule, value, callback) {
  if (!value) {
    callback()
    return
  }
  const field = rule.field
  const textLengthRules = {
    name: 120,
    code: 60,
    accountPeriod: 20,
    bankName: 60,
    bankAccount: 19,
    taxId: 20,
    contacts: 60,
    address: 160,
    remark: 200,
    tepName: 80 // 权限模板名称
  }
  if (textLengthRules[field] && value.length > textLengthRules[field]) {
    callback(new Error(`${value.length}/${textLengthRules[field]} 内容输入超出范围`))
    return
  }
  callback()
}

需要校验的组件引用使用：

import { valieTextLength } from '@/utils/validate'

data中定义：

data() {
	const valied = (rule, value, callback) => { valieTextLength(rule, value, callback) }
	return {
		rules: {
			name: [ //这里做了三种校验
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          {
            pattern: /^[\u4e00-\u9fa5\_a-zA-Z0-9.·-]+$/,
            message: '不支持特殊字符',
            trigger: 'blur'
          },
          { validator: valied }
        ]
		}
	}
}

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。