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之间的数字都可能出现,花括号 {} 代表的是前面[]出现的次数