首页 > js教程 > 正文

Vue中Element表单验证的基本要素

原创 2018-07-14 15:52:10 0 27
这篇文章主要介绍了关于Vue中Element表单验证的基本要素,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

Element主要使用了async-validator这个库作为表单验证

async-validator主要分成三部分

  • Validate

  • Options

  • Rules

其中,对于我们使用Element的来说,Rules最重要,也是这部分内容较多的。

async-validator各部分

async-validator基本使用

import Validator from 'async-validator'

// 规则的描述
const rules = {
  name: { type: 'string', required: true }
}

// 根据规则生成验证器
const validator = new Validator(rules)

// 要验证的数据源
const source = {
  name: 'LanTuoXie'
}

// 验证后的回调函数
function callback (errors, fileds) {
  if (errors) {
    // 验证不通过,errors是一个数组,记录那些不通过的错误信息
    // fileds是所有数据源的字段名,也即上面的source的'name'
    // 验证是根据字段名来的,rules.name 对应 source.name。 字段名要一样才会验证
  }
  // 下面是验证通过的逻辑
}

// 验证数据源是否符合规则
validator.validate(source, callback)

Validate

就是上面例子中的validator.validate,是一个函数

function(source, [options], callback)

source和callback对应上面的例子。

Options

Options有两个值

  • first: 一个布尔值,如果出现字段不通过,终止验证后面的字段

  • firstFields: 布尔值或者字符串,如果验证一个字段时,一个规则不通过,终止验证下个规则(一个字段,多个规则的情况)

firstFields是针对单个字段多规则的情况下使用,而first是针对所有字段

Rules

最重要的还是Rules。定义rule可以有三种形式,但是rules字段名一定要和数据源source的字段名一致。

  • 函数的方式:{ name(rule, value, callback, source, options) {} }

  • 对象的方式: { name: { type: 'string', required: true } }

  • 数组的方式: { name: [{ type: 'string' }, { required: true }] }

上面可以看到,字段名name可以有3种方式定义规则,在使用Element的时候还是推荐对象和数组的方式,这个两个比较简单,函数看情况使用。

除了typerequired还有哪些用法可以用以及有什么用?

Rules的默认规则

  • type: 要被验证的数据的类型如urlnumber

  • required: 是否必填

  • pattern:使用正则来验证

  • min: 数据的长度的最小值 (数据类型必须是stringarray)

  • max: 数据的长度的最大值 (数据类型必须是stringarray)

  • len: 数据的长度必须等于这个值 (数据类型必须是stringarray)

  • enum: 数据的值必须等于这个枚举数组某个元素 { enum: [1, 2, 3] }

  • transform: 一个钩子函数,在开始验证之前可以对数据先处理后验证,如吧number转为string后再验证

  • message: 报错的提示信息可以是字符串也可以是jsx标签<span>Name is required</span>

  • validator: 自定义验证函数以及报错信息 validator(rule, value, callback)

  • 还有一个Deep Rules是处理object或者array类型的,使用了fieldsdefaultField

  • fields:Deep Rules的时候使用,定义下一层的字段名以及规则

  • defaultField: Deep Rules的时候使用,所有下一层的字段都会采用该规则,可以被fields替换

默认的Type

  • string:必须是String类型,规则不设置type默认是这个

  • number:必须是Number类型,如果后台返回的数据是字符串,可以用transform转为Number类型,字符串类型的数字('12')不会通过,要注意

  • boolean: 必须是Boolean类型

  • method: 必须是Function

  • regexp:必须是正则RegExp

  • integer:是Number类型的正整数

  • float: 是Number类型的浮点数

  • array: 是Array.isArray通过的数组

  • object: Array.isArray不通过的Object类型

  • enum: 要先定义enum,然后值必须是enum某个值

  • date: 必须是Date对象的实例

  • url: String类型且符合链接格式

  • hex

  • email: String类型,且符合邮箱格式

Deep Rules使用demo

cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一个urls的数组,
const rules = {
  urls: {
    type: 'array',
    required: true,
    defaultField: { type: 'url' }
  }
}
const ids = {
  name: 'LanTuoXie',
  age: 12,
  spc: '帅'
}

const rules = {
  ids: {
    type: 'object',
    required: true,
    fields: {
      name: { type: 'string', required: true },
      age: { type: 'number', required: true, tranform: Number },
      spc: { type: 'string', required: true }
    }
  }
}

自定义验证validator

validator(rule, value, callback)

  • rule: 记录了验证字段的字段名以及规则的信息

  • value: 要验证的值

  • callback: 如果callback()代表验证通过,如果callback(new Error('错误要提示的信息'))代表验证不通过

// 验证是[min, max]范围内的正整数
const betweenInt = (min, max) => (rule, v, cb) => {
  const isBetween = v >= min && v <= max
  const isInt = /^[0-9]+$/.test(v)
  if (isBetween && isInt) return cb()

  return cb(new Error(`要求是在${min}到${max}的正整数 [${min}, ${max}]`))
}

const rules = {
  num: { validator: betweenInt(1, 5), required: true }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

vue项目中如何实现保存头像以及base64字符串转图片的功能

Vue中for in对象时如何解决属性为非负整数的问题

以上就是Vue中Element表单验证的基本要素的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Element表单验证
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节