VUE专题 自定义element输入框校验方式

template中

其中这里看到的标签可能和实际使用的elementUI中不一致，实际上只是稍微换了下大小写和显示的名称，下面其实都是原生的elementUI组件。

下面是联系方式的自定义校验，主要看 :rules中的内容

<ELCol :span="12">
	<FormItem label="联系方式" prop="phonenumber" :rules="{validator: validTelNumber, trigger: 'blur' }" required>
	<ElInput placeholder="请输入联系方式" v-model="inventory.phonenumber" :readonly="isReadonly"></ElInput>
	</FormItem>
</ELCol>

methods中

/**
* 校验联系电话
*/
validTelNumber: function(rule, value, callback) {
	if (value) {
	var isPhone = /^[0-9-]{1,20}$/
	if (!isPhone.test(value)) {
	callback(new Error("请输入长度在20位以内的有效字符，包含数字或'-'"))
	}
	}
	callback()
},

实际使用的自然是正则

再来一个例子

Template中

<ELCol :span="12">
<FormItem label="项目建设年限" prop="foreignEntity.buildTime" :rules="{validator: validBuildTime, trigger: 'blur' }">
<ElInput placeholder="请输入项目建设年限例如 2020-2021" v-model="projectData.foreignEntity.buildTime" :readonly="isReadonly"></ElInput>
</FormItem>
</ELCol>

methods中

// 建设年限校验
validBuildTime:function(rule, value, callback) {
	if(value) {
	var timeformat = /^[1-9]{1}[0-9]{3}[-]{1}[1-9]{1}[0-9]{3}$/
	if (!timeformat.test(value)) {
	callback(new Error("请输入 类似于 2020-2022 格式的内容"))
	}
	}
	callback()
},

正则说明

正则的 /^ 和 $/是固定的分别表示以什么开头和结尾，中括号也就是 [] 代表的单独的一位中可能出现的情况 1-9表示 从1到9之间的数字都可能出现，花括号 {} 代表的是前面[]出现的次数