el-input输入框校验

疆~

已于 2024-03-21 13:38:59 修改

阅读量5.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ElementUI 文章标签：前端

于 2022-12-09 16:11:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40323256/article/details/128254804

ElementUI 专栏收录该内容

20 篇文章

订阅专栏

本文介绍四种有效的方法来防止用户在前端输入框中输入空格和特殊字符，包括使用v-model.trim修饰符、正则表达式验证、el-form表单验证以及通过事件监听实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

禁止输入空格

方式1：

使用trim修饰符，它是v-model的一种修饰符，可以过滤掉内容左右两边的的空格代码

 <el-input v-model.trim="data"></el-input>

方式2：

正则

/*keyup.native是回车事件*/
<el-input type="test"  @keyup.native="getDataListS" v-model="userNameInput></el-input>

export default{
	data(){
		return{
			userNameInput:'',
		}
	},
	methods:{
		getDataListS(){
		/*这个正则表示的是输入框前后不得有空格*/
			let re=/^(?!\s+).*(?<!\s)$/;
			if(re.test(this.userNameInput)==true){
				/*所需要写的事件*/
			}else{
				/*空格的时候的提示语*/
			}
		}
	}
}

方式3：

el-from的表单验证

rules: {
                name: [
                        { required: true, message: '不能为空', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能为空格', trigger: 'blur' }
                ]
            }

方法4：

输入框禁止输入特殊字符：

/**
 * 匹配特殊字符的正则
 */
export const regexpSpecialStr =
    /[-~#（）|【-】· (){}+=*^&%$@!.,，。<>;:：；‘’“”、'"?`\_\/\\]/g;

const handleInputName = (val: string) => {
    formData.value.name = val.replace(regexpSpecialStr, '');
};

限制只能输入数字

输入中文、空格或者其他特殊字符将不会有任何反应。

可以输入负号

const handleInput = (data: any) => {
    currentInput.value = data.replace(/[^\d]/g, '');
};