el-form 表单 正则表达式 校验

element UI,输入框失去焦点的时候提示
参考此篇博客Vue.js验证表单不能包含中文，只可以数字+字母

<el-form
	ref="ruleForm"
	:rules="rules"
	:model="addEditForm"
	label-width="80px"
>
	<el-form-item
		label="角色名称"
		prop="roleName"
	>
	<el-input
		v-model.trim="addEditForm.roleName"
		placeholder="填写角色名称"
		style="width:250px"
		maxlength="100"
		show-word-limit
	/>
	</el-form-item>
</el-form>

<script>
	data() {
		return {
			addEditForm: {
			roleName: ''
			},
			rules: {
				roleName: [
				{ required: true, message: '请输入角色名称', trigger: 'blur' },
				{ pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文', trigger: 'blur' },
				{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号', trigger: 'blur' },
				{ pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母', trigger: 'blur' },
				{ pattern: /^[1-9]*$/, message: '请输入正整数', trigger: 'blur' }, // 可以输入多位正整数
				{ pattern: /^[1-9]d*$/, message: '请输入正整数', trigger: 'blur' }// 只能输入一位正整数
				]
			}
		}
	}
</script>