每次使用element-ui用到表单的都比较头大,感觉他们的表单要验证很复杂,每个有表单页面都要定义对应的规则,而且还会有好多规则还是重复的,更重要的是这些规则写好之后下个项目想再用的话得一个个找,很不方便。
el-form-vaild-item
使用方法也很简单,自定义的规则都在一个文件,其他项目用的时候直接拷贝过去就好了
首先安装
npm install el-form-vaild-item --save
引入并应用组件
// main.js
import Vue from 'vue'
import ElFormValidItem from 'el-form-valid-item'
// 这个是自定义的表单验证规则
import FormRules from './formRules'
// 应用自定义规则
ElFormValidItem.extendRules(FormRules)
// 应用组件
Vue.use(ElFormValidItem)
使用方法
使用的时候就可以直接通过属性 rules="required|number"
就可以了,不同的规则名称用|
隔开,或者直接用数组传也可以
// template
// ...
<el-form-valid-item label="输入框1:" prop="iptVal1" rules="required|maxLen:8">
<el-input v-model="iptVal1" />
</el-form-valid-item>
// or
<el-form-valid-item label="输入框2:" prop="iptVal2" :rules="['required', 'maxLen:8']">
<el-input v-model="iptVal2" />
</el-form-valid-item>
// ...
自定义规则
用规则名称作为字段名,里面带上两个方法,validate
和 getMessage
,两个方法都带相同的 param
参数
// formRules.js
/**
* // 规则格式
* 规则名称: {
* validate(param) { return true or false }
* getMessage(param) { return '消息内容' }
*
* param 参数
* param {
* value: '', // 输入框的值
* field: '', // 字段名称
* data: '' // 规则上带的参数(冒号后的内容)
* }
*
* } */
export default {
// 整数校验
int: {
validate(param) {
return !/^(-)?\d+$/.test(param.value)
},
getMessage(param) {
return `${param.field}必须是整数`
}
}
// 可单独提交某个属性来覆盖原来的规则的某个属
required: {
getMessage(param) {
return `请选择${param.field}`
}
}
// 可根据需要传入参数返回不同提示
required: {
getMessage(param) {
return param.data === '1' ? `${param.field}不能为空` : `请选择${param.field}`
}
}
}