vant(ZanUi)结合async-validator实现表单验证的方法
程序员文章站
2022-06-16 20:41:53
最近在开发一个移动端商城项目,用到了有赞的 ,因为最近大都采用 element ui 在做pc端的东西,对比来说,vant的完成度还是偏低了点,很多细节都虽然都实现了接口,...
最近在开发一个移动端商城项目,用到了有赞的 ,因为最近大都采用 element ui 在做pc端的东西,对比来说,vant的完成度还是偏低了点,很多细节都虽然都实现了接口,但是想使用得自己去想办法,没办法拿来即用。昨天用到 uploader 图片上传 如是,提供了file回调,却没有提供上传功能,我必须给他加2个函数实现axios提交才能用,还有今天用到表单验证这块,它的 field组件 虽然给了error-message的错误提示接口,但是没有内置表单验证功能。
element ui 采用实现表单验证,我也基于这个组件进行扩展,async-validator不支持细粒化验证,于是先对它进行扩展
validator.js
import asyncvalidator from 'async-validator' class validator { /** * 构造 * @param rules object async-validator rules * @param data 初始对象 */ constructor(rules, data) { this.setdata(data); this.setrules(rules); } /** * 重新定义初始对象 * 也可以直接修改实例的data * validator.data = newdata * @param data */ setdata(data) { this.data = data; } /** * 设定规则 * @param rules rules object async-validator rules * @param cover 是否替换旧规则 */ 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); } } /** * 执行验证 * @param callback(errors, fields) * @param data 可选 传空将验证构造data 传string或数组验证构造data的响应字段 * 以上参数顺序可互转 */ 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
<template> <div> <van-cell-group> <van-field placeholder="名称/姓名" label="名称" v-model="data.name" :error-message="errormsg.name" ></van-field> <van-field type="tel" placeholder="请输入手机号码" label="手机" v-model="data.mobile" :error-message="errormsg.mobile" @click-icon="data.mobile = ''" icon="clear" ></van-field> <van-field center v-model="data.code" label="短信验证码" placeholder="请输入验证码" icon="clear" :error-message="errormsg.code" @click-icon="data.code = ''" > <van-button slot="button" size="small" :disabled="countdown > 0" @click="sendmobilecode" type="primary"> {{ countdown ? countdown + 's' : '发送'}} </van-button> </van-field> </van-cell-group> <div class="pad-all mar-top"> <van-button block type="primary" @click="submit"> 立即注册 </van-button> <van-button block class="mar-top" @click="reset"> 重置 </van-button> </div> </div> </template> <script> import {field, cellgroup, cell, button, toast} from 'vant'; import validator from './validator.js' export default { name: 'demo', components: { [field.name]: field, [button.name]: button, [cell.name]: cell, }, data() { return { countdown: 0, data: { name: '', mobile: '', code: '', }, errormsg: { name: '', mobile: '', code: '', }, rules: { name: [ {required: true, message: '请输入名称'} ], mobile: [ { validator: (rule, value, callback) => { if (!value) { callback('请输入手机号码'); } else if (/^[1][0-9]{10}$/.test(value)) { callback(); } else { callback('请输入正确的手机号码'); } } } ], code: [ {required: true, message: '请输入验证码'} ] }, } }, methods: { sendmobilecode() { this.validate(errors => { if (!errors) { toast('发送成功'); this.countdown = 60; this.countdownsubtract(); } }, 'mobile') }, countdownsubtract() { if (this.countdown > 0) { settimeout(() => { this.countdown -= 1; this.countdownsubtract() }, 1000) } }, /** * 清除验证提示 * @param attrs */ resetfield(attrs) { attrs = !attrs ? object.keys(this.errormsg) : ( array.isarray(attrs) ? attrs : [attrs]); attrs.foreach(attr => { this.errormsg[attr] = '' }) }, /** * 验证方法 * @param callback * @param data */ validate(callback, data) { this.validator.validate((errors, fields) => { this.resetfield(); if (errors) { fields.foreach(item => { this.errormsg[item.field] = item.message }) } callback && callback(errors, fields) }, data); }, submit() { this.validate((errors, fields) => { }) }, reset() { this.data = { name: '', code: '', mobile: '', }; this.validator.setdata(this.data); this.resetfield(); }, }, created() { this.validator = validator(this.rules, this.data); }, } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。