VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入

61 篇文章 2 订阅
49 篇文章 9 订阅

需求:输入超过规定长度error提醒,并实时显示输入长度,可无限输入

步骤:
我的项目中使用校验比较多,所以进行简单的封装:
新建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 }
        ]
		}
	}
}

form表单中prop要和rules中定义校验名一致:

<el-form
   ref="form"
   class="customer-form"
   :model="form"
   label-width="85px"
   :inline="true"
   :rules="rules"
   label-suffix=":"
 >
 	<el-form-item label="客户名称" prop="name" class="form-style">
       <el-input v-model.trim="form.name" placeholder="请输入" size="small" class="input-style" />
    </el-form-item>
 </el-form>

看效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/c1e1228120c74518b4a12f1323fe4aa3.png

可以看到我们自定义name长度为120,当用户输入超过120会出现error提示,并实时显示用户输入的字符长度,可以无限输入但是无法通过校验。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赫兹/Herzz

如果我的博文帮助到您请打赏支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值