前景: 是测试测出来的问题,之前的一个业务中输入文章的标题,按照往常的判别的情况进行了简单处理,后来发现存在这个bug。
以往:
这种简单的判别是否输入,我自己是习惯用if,错误优先原则,如果为true,则弹出提醒需要输入'XXX',但是这回发现这里是有漏洞的,对于输入回车(空格),这种情况下的判断是输入内容的,这里要处理一下这种情形,毕竟也是不可以为空格的,展示上还是空
/* 一旦输入中包含空格就会报错,不可行 */
// if(this.program.length>0 &&this.program!='') {
//this.$message.error('分账方案不能为空格');
// }
// if(this.program != this.program.replace(/(^\s*)|(\s*$)/g,"")) {
//this.$message.error('分账方案不能为空格');
// }
// if(this.program.indexOf(" ") >= 0) {
//this.$message.error('分账方案不能为空格');
// }
以上几个方法,都是可以识别出来空格,但是我暂时没办法区分开既有空格和正常的内容同时输入的情况,也就是用上面的方法正常输入内容再输入空格也会弹出提示,我觉得这种不需要提示了。
我最后先用了vue的表单修饰符
,.trim
过滤前后空格。暂时在开发时候可以,到时候发到测试环境应该还会有问题,先暂时这么处理,具体到时候再找更好的方法了。
<el-input v-model.trim="program" placeholder="请填写" style="width:200px"></el-input>
--------找了新的方法分隔线 ------
看到👇这篇文章,参考了下,对于我的现有开发业务,我认为是可行的
JS判断输入框值是否为空
this.program = this.program.replace(/(^\s*)|(\s*$)/g, ''); //去除空格;
console.log('此刻的方案:',this.program)
if (this.program == '' || this.program == undefined || this.program == null) {
this.$message.error('不能输入为空、空格');
}
ok已经替代了我之前的简单判空的方法:
// if(!this.program) {
//this.$message.error('请填写方案名称');
// };