element-ui 验证规则
更新日志:
v1.3.3
+ 新增了身份证号码的验证
v1.2.2
+ 新增了d.ts文件, 在vscode中可以提示方法和参数
+ 新增required参数, 为空时不检测, 不为空时自动检测
yarn add element-ui-validation
# or
npm install element-ui-validation --save
// api:
// 主要验证普通文本框
rules.string(text: String, max?: Number, min?: Number, trigger?: String, required?: Boolean)
// text: 提示文本
// max: (默认: '') 被验证字符串最大长度
// min: (默认: '') 被验证字符串最小长度
// trigger: (默认: 'blur') 触发事件: 默认为`blur`
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合其他验证规则, 当为false时, 可以为空, 但是不为空时, 需符合其他验证规则
// 主要验证下拉框, 复选框, 单选框之类
rules.select(text: String, multiple?: Boolean)
// text: 提示文本
// multiple: 是否为数组
// 验证网址类
rules.url(text: String, required?: Boolean)
// text: 提示文本
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合Url规则, 当为false时, 可以为空, 但是不为空时, 需符合Url规则
// 整数(包含0), 通过正则匹配, 可限制最大值最小值
rules.integer(text: String, max?: Number, min?: Number, trigger?: String, required?: Boolean)
// text: 提示文本
// max: (默认: '') 被验证数值最大值 (注意: 非长度)
// min: (默认: '') 被验证数值最小值 (注意: 非长度)
// trigger: (默认: 'blur') 触发事件: 可以改成`change`
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合其他验证规则, 当为false时, 可以为空, 但是不为空时, 需符合其他验证规则
// 金额类型, 通过正则验证, 支持小数点后两位, 且可以限制最大值和最小值
rules.money(text: String, max?: Number, min?: Number, trigger?: String, required?: Boolean)
// text: 提示文本
// max: (默认: '') 被验证数值最大值 (注意: 非长度)
// min: (默认: '') 被验证数值最小值 (注意: 非长度)
// trigger: (默认: 'blur') 触发事件: 可以改成`change`
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合其他验证规则, 当为false时, 可以为空, 但是不为空时, 需符合其他验证规则
// 国内通用手机号码
rules.phone(text: String, required?: Boolean)
// text: 提示文本
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合手机号码规则, 当为false时, 可以为空, 但是不为空时, 需符合手机号码规则
// 国内通用银行卡
rules.bank_card(text: String, required?: Boolean)
// text: 提示文本
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合银行卡规则, 当为false时, 可以为空, 但是不为空时, 需符合银行卡规则
// 邮箱验证
rules.email(text: String, required?: Boolean)
// text: 提示文本
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合邮箱规则, 当为false时, 可以为空, 但是不为空时, 需符合邮箱规则
// QQ号
rules.qq(text: String, required?: Boolean)
// text: 提示文本
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合QQ号规则, 当为false时, 可以为空, 但是不为空时, 需符合QQ号规则
// 身份证号码
rules.idcard(text: String, required?: Boolean)
// text: 提示文本
// required: (默认: true) 是否允许为空, 当为true时, 不能为空, 且必须符合身份证号码规则, 当为false时, 可以为空, 但是不为空时, 需符合QQ号规则
<el-form :model="data.form" :rules="data.rules" ref="ref">
<el-form-item label="地址:" label-width="120px" prop="string1">
<el-input v-model="data.form.string1" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码:" label-width="120px" prop="string2">
<el-input v-model="data.form.string2" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码:" label-width="120px" prop="string3">
<el-input v-model="data.form.string3" auto-complete="off"></el-input>
</el-form-item>
</el-form>
import rules from 'element-ui-validation'
export default {
data() {
// 自定义规则
const validator = (rule, value, callback) => {
if (Number(this.int2) < Number(this.int1)) {
return callback(new Error('int2不能小于int1'))
}
callback()
}
return {
form: {
string1: '',
string2: '',
string3: '',
int1: '',
int2: ''
},
data: {
rules: {
// 输入框规则 rules.string('提示文字', 最大长度, 最小长度)
string1: rules.string('地址'),
string2: rules.string('密码', null, 6), // 最短6位
string3: rules.string('密码', 16, 6), // 6-16位
// 下拉框, 单选框, 复选框规则
select1: rules.select('城市'),
select2: rules.select('城市', true), // 多选
// 网址规则
url: rules.url('网址'),
// 整数规则(包含0)
integer1: rules.integer('人数'),
integer2: rules.integer('人数', 100), // 最大值100
integer3: rules.integer('人数', 100, 10), // 10-100
// 自行新增规则
integer4: [
...rules.integer('人数'),
{
validator,
trigger: 'blur'
}
],
// 金额规则 rules.money('提示文字', 最大值, 最小值)
money: rules.money('金额', 0.8, 0),
// 手机号规则
phone: rules.phone('手机号码'),
// 银行卡规则
bank_card: rules.bank_card('银行卡'),
// 身份证规则
idcard: rules.bank_card('身份证'),
// 邮箱
email: rules.email('邮箱'),
// QQ
email: rules.qq('QQ号码'),
}
}
}
}
}
License
MIT