el-input输入框校验

禁止输入空格 

方式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, '');
};