vue+element的form表单实现禁止输入汉字（中文），即使输入也替换为空字符串

Posted 2021-10-20 web半晨

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
	<el-form-item label="活动名称" prop="path">
		<el-input v-model="ruleForm.path" placeholder="请输入路径"></el-input>
	</el-form-item>
	
	<el-form-item label=" " prop="path">
		<el-button type="primary" @click="submitForm">提交</el-button>
	</el-form-item>
</el-form>

export default {
	data() {
		const checkPath = (rule, value, callback) => {
			this.ruleForm.path = value.replace(/[\\u4E00-\\u9FA5]/g, "");
			// 一定要执行回调函数
			// 否则不起效果
			callback();
		};

		return {
			ruleForm: {
				path: ""
			},
			rules: {
				path: [
					{ required: true, message: "路径不能为空", trigger: "blur" },
          			{ validator: checkPath, trigger: "change" }
				]
			}
		};
	},

	methods: {
		submitForm() {
			this.$refs["ruleForm"].validate((valid) => {
				console.log(valid);
			});
		}
	}
}