淘先锋技术网

首页 1 2 3 4 5 6 7

每次使用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>
// ...

自定义规则

用规则名称作为字段名,里面带上两个方法,validategetMessage,两个方法都带相同的 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}`
        }
    }
}

链接:https://github.com/helloyutian/el-form-valid-item