文档章节

Element表单验证(1)

o
 osc_odyg6b92
发布于 2018/07/13 15:45
字数 1148
阅读 14
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

Element表单验证(1)

首先要掌握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 }
}
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
数据库表单生成器--SQLScreens

SQLScreens 是一个使用 Tcl/TK 编写的简单关系型数据库表单生成工具。可让你快速创建查询界面,并指定相应的表和字段。支持多种数据库,包括:MySQL, SQLite, and INFORMIX, and ODBC for o...

匿名
2013/02/17
866
0
响应式框架--Groundwork

GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ,主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 ...

匿名
2013/02/25
2.8W
4
自定义表单系统--FormDesign

是基于 FLEX 开发的一款B/S的自定义表单系统 整个过程如下: 1、通过FormDesign自定义表单画出相应的表单; 2、将生成好的XML放到程序中,并通过后台自动编译成JSP; 注:FormDesing只是自定...

polliwog
2013/03/29
1.6W
1

没有更多内容

加载失败,请刷新页面

加载更多

Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
30分钟前
13
0
原子属性和非原子属性有什么区别? - What's the difference between the atomic and nonatomic attributes?

问题: What do atomic and nonatomic mean in property declarations? 属性声明中atomic和nonatomic是什么意思? @property(nonatomic, retain) UITextField *userName;@property(atomic, ......

fyin1314
今天
7
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0
ssh“权限太开放”错误 - ssh “permissions are too open” error

问题: I had a problem with my mac where I couldn't save any kind of file on the disk anymore. 我的Mac出现问题,无法再在磁盘上保存任何类型的文件。 I had to reboot OSX lion and r......

javail
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部