真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法

最近在開發(fā)一個(gè)移動(dòng)端商城項(xiàng)目,用到了有贊的 vant ,因?yàn)樽罱蠖疾捎?element ui 在做PC端的東西,對(duì)比來說,vant的完成度還是偏低了點(diǎn),很多細(xì)節(jié)都雖然都實(shí)現(xiàn)了接口,但是想使用得自己去想辦法,沒辦法拿來即用。昨天用到 Uploader 圖片上傳 如是,提供了file回調(diào),卻沒有提供上傳功能,我必須給他加2個(gè)函數(shù)實(shí)現(xiàn)axios提交才能用,還有今天用到表單驗(yàn)證這塊,它的 Field組件 雖然給了error-message的錯(cuò)誤提示接口,但是沒有內(nèi)置表單驗(yàn)證功能。

成都創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì),其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷人員及形象策劃。承接:成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

element ui 采用async-validator 實(shí)現(xiàn)表單驗(yàn)證,我也基于這個(gè)組件進(jìn)行擴(kuò)展,async-validator不支持細(xì)?;?yàn)證,于是先對(duì)它進(jìn)行擴(kuò)展

validator.js

import asyncValidator from 'async-validator'

class validator {
 /**
 * 構(gòu)造
 * @param rules object async-validator rules
 * @param data 初始對(duì)象
 */
 constructor(rules, data) {
 this.setData(data);
 this.setRules(rules);
 }

 /**
 * 重新定義初始對(duì)象
 * 也可以直接修改實(shí)例的data
 * validator.data = newData
 * @param data
 */
 setData(data) {
 this.data = data;
 }

 /**
 * 設(shè)定規(guī)則
 * @param rules rules object async-validator rules
 * @param cover 是否替換舊規(guī)則
 */
 setRules(rules, {cover} = {}) {
 if (cover === undefined || cover) {
  this.validators = {};
 }
 for (let attr in rules) {
  const rule = {};
  rule[attr] = rules[attr];
  this.validators[attr] = new asyncValidator(rule);
 }
 }

 /**
 * 執(zhí)行驗(yàn)證
 * @param callback(errors, fields)
 * @param data 可選 傳空將驗(yàn)證構(gòu)造data 傳string或數(shù)組驗(yàn)證構(gòu)造data的響應(yīng)字段
 * 以上參數(shù)順序可互轉(zhuǎn)
 */
 validate(callback, data) {
 let cb,d;
 if (typeof callback === 'function' ){
  cb = callback;
  d = data;
 }else if (typeof data === 'function' ){
  cb = data;
  d = callback;
 }

 let _d = d;

 if (this.data) {
  if (!d) {
  _d = this.data;
  } else if (typeof d === 'string') {
  _d = {};
  _d[d] = this.data[d]
  } else if (Array.isArray(d)) {
  _d = {};
  d.forEach(attr => {
   _d[attr] = this.data[attr]
  })
  }
 }

 const err = [];

 if (_d) {
  for (let attr in _d) {
  if (this.validators[attr]) {
   const o = {};
   o[attr] = _d[attr];
   this.validators[attr].validate(o, (error) => {
   if (error) {
    err.push(error[0])
   }
   })
  }
  }
 }

 cb && cb(err.length > 0, err)

 }
}

export default function (rules, data) {
 return new validator(rules, data)
}

demo.vue


以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


分享名稱:vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法
網(wǎng)站地址:http://weahome.cn/article/igjisd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部