关于element UI 中输入框禁止输入空格的实现
在项目开发过程中会遇到输入框禁止输入空格或者特殊字符之类的需求，其中禁止输入空格的实现方法如下所示。
1、使用vue框架中的.trim修饰符
<el-input class="nameInput" maxlength="20" v-model.trim="form.teamName" placeholder="请输入团队名称"></el-input>
2、使用原生input标签自带的keyup事件监听方法
// 实现一，简单
<el-input class="nameInput" maxlength="20" v-model="form.teamName"
@keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm,'')"
placeholder="请输入团队名称"></el-input>
// 实现二，更符合WEB标准，结构,表现和行为分离原则
<el-input class="nameInput" maxlength="20" v-model="form.teamName" @keyup.native="trimLR" placeholder="请输入团队名称"></el-input>
//js部分
trimLR() {
this.form.teamName = this.form.teamName.replace(/^\s+|\s+$/gm,'')
}
以上实现方法，需要注意，原生事件onkeyup，改成了@keyup，并且需要在后边追加修饰符.native，这样就是告诉vue使用input的原生事件监听方法，此外，在方法的数据处理中，使用的是$event.target.value来代表input框的value值，不是this.value，也不是document.getElementById(‘XXX’).value。
在方法一中，虽然最终formData.title字段的值，过滤掉了首尾的空格，但是实践发现，在input框的展示上，并没有将空格过滤掉，还是展示的是有空格的数据。因此，更提倡第二种方法，使得数据和展示保持一致性，也方便后续问题的排查和维护。
尝试在方法二中，将keyup事件方法改为input或者change，虽然最终结果，value值过滤掉了空格，但是在页面展示上，value值还是保留了空格，以及光标的位置显示，有些混乱的问题，与方法一的表现差不多。所以还是提倡使用keyup事件来处理禁止输入的问题。
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;
}
});
}
... ...
}
该方法，需要使用element UI 的Form表单el-form标签，ref属性用来指定表单的名称，用于在代码中使用this.$ref.XXX方法寻找表单所在的DOM节点；rules属性用来指定验证规则；在el-form-item标签中，添加prop属性，属性值与rules验证规则中需验证的字段保持一致。以上两种实现方法，请注意区别和各自的特点。如果考虑复用性，可以使用实现一的写法，如果代码比较多，并且也不会复用的，可以参考实现二的写法，方便规则的寻找。
结合确定按钮的点击事件，将表单ref的属性值传递给submitForm方法，通过this.$refs[formName].validate()方法来判定表单中所有的验证是否都通过了，valid为false，表示未通过的会在表单的相应位置展示自定义的message信息，提示用户按照规则输入。如果valid为true，表明验证通过，执行相关逻辑。这里要注意的一点是，在验证规则rules中，非验证条件下，必须返回callback()方法，使得表单验证形成闭合，否则虽然表单中都展示绿色边框，表示验证通过，但是valid还是false。
此外，第三种方法，只会实时提示警告，展示给用户，所输入的内容不符合自定义的验证规则，但是不会将输入的内容进行过滤，如果有完全禁止输入，而不是只提示用户的需求时，需要结合方法二来进行处理。
举一反三，其他禁止输入的需求，比如只允许输入数字，不允许输入特殊字符等需求，也可以按照上述方法进行处理，并保持数据与展示一致。
————————————————
版权声明：本文为CSDN博主「rushichunqiu」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/rushichunqiu/article/details/95939612
