element ui rules校验记录,方便后续使用

rules: {
//空验证
string: [
    {type: 'string',required: true, message: "源库名称不能为空", trigger: "blur"}
],
//数字验证
number: [
    {type: 'number',required: true, message: "所属组织名称不能为空", trigger: "blur"}
],
//整数校验
integer: [
    {type: 'integer', message: "请输入整数", trigger: 'blur'}
],
//小数校验
float: [
    {type: 'float', message: "请输入浮点数", trigger: 'blur'}
],
//在什么中校验
enum: [
    {type: 'enum', enum: ['aaa', 'bbb'], message: "不存在enum中", trigger: 'change'}
],
// url校验
url: [
    {type: 'url', message: "请输入正确的url", trigger: 'change'}
],
//email校验
email: [
    {required: true, message: '请输入邮箱地址', trigger: 'blur' },
    {type: 'email', message: "请输入正确的email", trigger: 'change'}
],
//正则校验
pattern: [
    {pattern: /^[0-9]*$/, message: `请输入数字`, trigger: 'blur'}
],
//最小长度与最大长度校验
minAndMax: [
    {min: 2, max: 9, message: '请输入2-9位', trigger: 'blur'}
],
// 指定确切长度校验
length: [
    {len: 5, message: '请输入5位', trigger: 'blur'}
],
//转换值校验
transform: [
    {type: 'enum', enum: [1,2,3], message: "结果不存在", trigger: ['change', 'blur'], transform(value) {return Number(value * 10)}}
]
//手机号验证
phone: [
    {required: true, message: "手机号不能为空", trigger: "blur"},
    {pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur'}
]

}

也可以动态验证,但是这种验证一两个动态还好,如果多了,会很难受。

// 根据form.place的值决定type是不是要必填
<el-form-item label="类型" prop="type" 
:rules="form.place == 1 ? [{required: true, message: '类型不能为空', trigger: 'blur'}] : [{required: false, trigger: 'blur'}]" />
              

也可以指定自定义的校验逻辑,myselfValidator需要提前定义完成

let myselfValidator = (rule, value, callback) => {
  if(String(value).length > 10) {
    callback('最长输入10位')
  } else {
    callback()
  }
}

// 校验
num: [
  {validator: myselfValidator, trigger: 'blur'}
]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值