elementUI中input框无法输入与禁止输入空格
最编程
2024-01-17 21:53:15
...
input框无法输入的解决办法
vue<el-input type="input" v-model="input" @input="change($event)"></el-input>
js
methods:{
change(e) {
this.$forceUpdate()
}
}
如何禁止input框的空格
1、使用vue框架中的.trim修饰符
<el-input placeholder="请输入名称" v-model.trim="formData.title" maxlength=30></el-input>
2、使用原生input标签自带的keyup事件监听方法
// 实现一,简单
<el-input placeholder="请输入名称" v-model="formData.title" maxlength=30 @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm,'')"></el-input>
// 实现二,更符合WEB标准,结构,表现和行为分离原则
<el-input placeholder="请输入名称" v-model="formData.title" maxlength=30 @keyup.native="trimLR"></el-input>
// js部分
methods: {
trimLR() {
this.formData.title = this.formData.title.replace(/^\s+|\s+$/gm,'')
//replace(/^\s+|\s+$/gm,'')去除input的空字符串
},
}
3、使用element UI 的表单验证功能
<el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="名称" prop="title">
<el-input placeholder="请输入名称" v-model="formData.title" maxlength=30></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
</el-form-item>
</el-form>
// 实现一
data() {
// 自定义title验证规则
var validateTitle = (rule, value, callback) => {
const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/
if (!reg.test(value)) {
callback(new Error('只允许填写汉字、字母、下划线'))
} else {
callback()
}
}
return {
//表单验证规则
rules: {
title: [
{ required: true, message: '请输入名称', trigger: 'change' },
{ validator: validateTitle, trigger: 'change' }
],
},
}
},
// 实现二
data() {
return {
//表单验证规则
rules: {
title: [
{
required: true,
validator: (rule, value, callback) => {
const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/
if (value == '') {
callback(new Error('请填写必填项'))
} else if (!reg.test(value)) {
callback(new Error('只允许填写汉字、字母、下划线'))
} else {
callback()
}
},
trigger: 'change'
}
],
},
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
推荐阅读
-
紧急模式问题处理 - 图 1 紧急模式 根本原因分析 应急模式提供了尽可能小的环境,即使无法进入应急模式,也可以在其中修复系统。在应急模式下,系统只安装根文件系统供读取,不尝试安装任何其他本地文件系统,不激活网络接口,只启动一些基本服务。 进入应急模式的原因通常是 /etc/fstab 文件中存在错误,导致文件系统挂载失败。 文件系统中存在错误,导致。 约束和限制 本节适用于 Linux 操作系统紧急模式。程序涉及修复文件系统。修复文件系统有丢失数据的风险,因此请先备份数据,然后再执行修复操作。 处理方法 输入根密码,然后进入修复模式。 在应急模式下,根分区以只读模式挂载。要修改根目录中的文件,需要执行以下命令以读写模式重新挂载根分区。# mount -o rw,remount / 请执行以下命令首先检查 fstab 文件是否有误,然后尝试挂载所有未挂载的文件系统。# mount -a 如果挂载点不存在,请创建一个挂载点。 如果不存在此类设备,请注释或删除挂载行。 如果指定了不正确的挂载选项,请将挂载参数更改为正确的参数。 如果没有发生错误,但出现 UNEXPECTED INCONSISTENCY;RUN fsck MANUALLY 消息(通常是由文件系统错误引起的),请跳至第 7 步。 执行以下命令打开 /etc/fstab 以修改相应的错误。# vi /etc/fstab /etc/fstab 文件包含以下字段,以空格分隔:[文件系统] [dir] [type] [options] [dump] [fsck] 表 1 /etc/fstab 参数 说明 参数 说明 [文件系统] 要挂载的分区或存储设备。 文件系统]列建议以 UUID 的形式写入。执行 blkid 命令可查询设备文件系统 UUID。 参考格式如下: # <device> <dir> <type> <options> <dump> <fsck>; UUID=b411dc99-f0a0-4c87-9e05-184977be8539 /home ext4 defaults 0 2 使用 UUID 的好处是,它们与磁盘顺序无关。如果你在 BIOS 中更改了存储设备的顺序,或重新插入了存储设备,或者因为某些 BIOS 可能会随机更改存储设备的顺序,那么使用 UUID 会更有效率。 [文件系统] 文件系统]的挂载位置。 类型 挂载设备或分区的文件系统类型,支持多种不同的文件系统:ext2、ext3、ext4、reiserfs、xfs、jfs、smbfs、iso9660、vfat、ntfs、swap 和 auto。 设置为自动类型后,挂载命令会猜测所使用的文件系统类型,这对 CDROM 和 DVD 等移动设备非常有用。 选项 挂载时要使用的参数,有些参数是特定文件系统特有的。例如,默认值参数使用文件系统的默认挂载参数,ext4 的默认参数为:rw、suid、dev、exec、auto、nouser、async。 有关更多参数,请执行以下命令查看 man 手册:# man mount
-
elementUI中input框无法输入与禁止输入空格
-
ElementUI 中禁止在输入框中输入空格