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
    评论
### 回答1: 在Vue 2.0中使用Element UI进行登录样式的话,你可以按照以下步骤进行: 1. 首先,在你的Vue项目中安装Element UI,你可以使用npm或者yarn命令进行安装: ``` npm install element-ui --save # 或者 yarn add element-ui ``` 2. 在你的Vue项目中导入Element UI组件库。你可以在main.js或者其他需要使用Element UI的地方进行导入: ``` import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 在你的登录组件中使用Element UI提供的组件,例如el-form、el-input、el-button等,来完成登录单的设计: ```html <template> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSubmit">登录</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { loginForm: { username: '', password: '' }, loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } }; }, methods: { handleSubmit() { // 处理登录逻辑 } } }; </script> ``` 这样就可以在你的Vue项目中使用Element UI来设计登录样式了。需要注意的是,以上代码只是一个示例,实际上还需要根据你的实际需求进行相应的调整。 ### 回答2: Vue2.0中使用Element UI实现登录样式可以通过以下步骤进行: 1. 引入Element UI组件库:首先在项目中安装Element UI依赖包,通过npm或yarn安装,然后在项目的入口文件(main.js或App.vue)中引入Element UI的主题样式和组件。 例如,可以使用以下命令安装Element UI: ```shell npm install element-ui --save ``` 然后在main.js文件中引入Element UI: ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. 创建登录页面:在项目的某个组件中,可以是单独的登录组件或者将登录作为页面的一部分,编写登录单和相关样式。 例如,可以创建一个Login.vue文件,在其中定义登录单: ```html <template> <div class="login-container"> <el-form :model="loginForm" ref="loginForm" class="login-form"> <el-form-item> <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input> </el-form-item> <el-form-item> <el-input type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { loginForm: { username: '', password: '' } } }, methods: { login() { // 处理登录逻辑 } } } </script> <style scoped> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-form { width: 300px; padding: 20px; } </style> ``` 3. 编写相关逻辑:在Login.vue组件中,根据业务需求,编写登录逻辑。 例如,可以在`login`方法中发送登录请求,处理登录逻辑: ```javascript methods: { login() { // 使用axios或其他方式发送登录请求 axios.post('/login', this.loginForm) .then(response => { // 登录成功,处理相关逻辑 }) .catch(error => { // 登录失败,处理错误信息 }); } } ``` 以上便是使用Vue2.0和Element UI实现登录样式的简单示例。在实际开发中,可以根据需求对登录页面和相关逻辑进行更加详尽的处理。 ### 回答3: Vue2.0 Element-UI登录样式可以通过使用Element-UI提供的组件和样式来创建。 首先,我们需要在项目中安装Element-UI并引入其样式。可以通过npm安装Element-UI,并在项目的main.js文件中引入Element-UI的样式文件。 在登录页面中,可以使用Element-UI提供的`el-form`组件来创建单,并使用`el-input`组件来输入用户名和密码。 然后,可以使用`el-button`组件创建登录按钮。可以设置按钮的类型为`primary`来突出显示登录操作。 可以利用Element-UI提供的样式类来进行布局和调整样式。例如,可以使用`el-form`组件的`label-position`属性来设置标签的位置,使用`el-form`组件的`size`属性来设置单元素的尺寸,并使用`el-button`组件的`class`属性来设置按钮的样式类。 此外,还可以自定义样式来适应项目的需求。可以通过在Vue组件中定义`style`部分来编写自定义的CSS样式代码,并将其应用到相应的元素上。 总之,Vue2.0 Element-UI登录样式的实现方式有很多,可以通过使用Element-UI提供的组件、样式和类,以及自定义的CSS样式来创建具有吸引力且符合项目需求的登录页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

赫兹/Herzz

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

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

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

打赏作者

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

抵扣说明:

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

余额充值