首頁 > web前端 > js教程 > Vue中Element表單驗證的基本要素

Vue中Element表單驗證的基本要素

不言
發布: 2018-07-14 15:52:10
原創
4047 人瀏覽過

這篇文章主要介紹了關於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, 值, 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標籤Name is required

  • #validator: 自訂驗證函數以及報錯訊息validator(rule, value, callback)

  • 還有一個Deep Rules是處理

    objectarray類型的,使用了fieldsdefaultField

  • #fields:Deep Rules的時候使用,定義下一層的欄位名稱以及規則

  • defaultField: Deep Rules的時候使用,所有下一層的欄位都會採用該規則,可以被fields取代

預設的Type

  • string:必須是String類型,規則不設定type預設是這個

  • #number:必須是Number類型,如果後台傳回的資料是字串,可以用transform轉為Number類型,字串類型的數字('12')不會通過,要注意

  • boolean: 必須是Boolean類型

  • method: 必須是Function

  • #reg :必須是正則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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板