el-form form regular expression verification

element UI, prompt when the input box loses focus.
Refer to this blog. The Vue.js verification form cannot contain Chinese, only numbers + letters.

<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>

Guess you like

Origin blog.csdn.net/weixin_43908123/article/details/108710298