UNIAPP----禁止输入框输入空格

在uniapp项目中，创建根目录utils，下级一个js文件：utils.js

utils.js内写

function isNull(str) {
		if (str == "") return true;
		var regu = "^[ ]+$";
		var re = new RegExp(regu);
		return re.test(str);
	}

	module.exports = {
		isNull: isNull,
	}

在需要验证空格的项目中引入

    import utils from '@/utils/utils.js';

HTML：

<template>
	<view>
		<view class="input">
			<input type="text" v-model="value" placeholder="请输入内容" />
			<button type="default" @click="add">添加</button>
		</view>
	</view>
</template>

JS：

<script>
	import utils from '@/utils/utils.js'
	export default {
		data() {
			return {
				value:''
			}
		},
		methods: {
			add(){
				if (utils.isNull(this.value)) {
					uni.showToast({
						title: '请输入内容'
					});
					return false;
				}else{
					console.log('添加成功')
				}
			}
			
		},
	}
</script>

这样当用户输入空格然后点击添加时，会提示用户输入信息。

但是这样用户可以在文字之前输入空格。

可以结合之前文章一起实现这是将用户输入的空格去除。

在上面的input里面添加

οnkeyup="this.value=this.value.replace(/[, ]/g,'')"

然后再用户输入的value下，增加 .replace(/[, ]/g,'')，剔除空格

完整代码：

<template>
	<view>
		<view class="input">
			<input type="text" v-model="value" placeholder="请输入内容" οnkeyup="this.value=this.value.replace(/[, ]/g,'')"/>
			<button type="default" @click="add">添加</button>
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/utils.js'
	export default {
		data() {
			return {
				value:''
			}
		},
		methods: {
			add(){
				if (utils.isNull(this.value)) {
					uni.showToast({
						title: '请输入内容'
					});
					return false;
				}else{
					console.log(this.value)
					console.log(this.value.replace(/[, ]/g,''))
					console.log('添加成功')
				}
			}
			
		},
	}
</script>

<style scoped>
</style>