福衢寿车elementUI表单的大局验证的方法步骤_vue

福衢寿车elementUI表单的大局验证的方法步骤_vue。运用ElementUi搭建框架的时候,我们应该都有思虑过如何是好全局验证,究竟复制粘贴什么的是最烦了,这里共享下个人的减轻形式。

评释法则

解析法规

相同验证准则,首若是是还是不是必填,不为空,以致参数类型的证实。
基于这几个原则,大家最早找找思路, 单个字段的印证是那般的:

name: { required: 是否必填, validator: 自定义规则, message: 失败提示消息, trigger: 触发方式}

巡回落成

一向的家有家规。当三个东西一定之后,那自然是能够重复使用的,并且能够快快速生成成,我们得以用循环来贯彻它。
不过用循环来落到实处,大家则供给一个数额准则。

定义数据法规

浅析下供给的字段,大致正是以下三种,别的的能够依据自家的必要去充实:

证实的字段名 label 验证的值 value 验证的品类 type 是还是不是必填 required
自定义准则 validator

那最后大家收获的是那样三个字段配置列表:

fieldList: [ {label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount}, {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd}, {label: '昵称', value: 'name', type: 'input', required: true}, {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true}, {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'}, {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone}, {label: '微信', value: 'wechat', type: 'input', validator: checkWechat}, {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ}, {label: '邮箱', value: 'email', type: 'input', validator: checkEmail}, {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'}, {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true} ]

form完整的字段配置提议仿效:

 formInfo: { ref: null, data: { id: '', // *唯一ID account: '', // *用户账号 password: '', // *用户密码 name: '', // *用户昵称 type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加 sex: 0, // *性别: 0:男 1:女 avatar: '', // 头像 phone: '', // 手机号码 wechat: '', // 微信 qq: '', // qq email: '', // 邮箱 desc: '', // 描述 status: 1 // *状态: 0:停用,1:启用', // create_user: '', // 创建人 // create_time: '', // 创建时间 // update_user: '', // 修改人 // update_time: '' // 修改时间 }, fieldList: [ {label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount}, {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd}, {label: '昵称', value: 'name', type: 'input', required: true}, {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true}, {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'}, {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone}, {label: '微信', value: 'wechat', type: 'input', validator: checkWechat}, {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ}, {label: '邮箱', value: 'email', type: 'input', validator: checkEmail}, {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'}, {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true} ], rules: {}, labelWidth: '120px' }

贯彻认证措施

一:
循环字段列表,依照type剖断是提示选拔不可能为空,仍然输入不可能为空二:若是字段必填,则依据是不是有自定义表达去变通验证准则三:
字段非必填,有自定义准绳变化验证

 // 初始化验证数据 _initValidate  { const obj = {}, fieldList = formInfo.fieldList // 循环字段列表 for (let item of fieldList) { let type = item.type === 'select' ? '选择' : '输入' if  { if  { obj[item.value] = { required: item.required, validator: item.validator, trigger: 'blur' } } else { obj[item.value] = { required: item.required, message: '请' + type + item.label, trigger: 'blur' } } } else if  { obj[item.value] = { validator: item.validator, trigger: 'blur' } } } formInfo.rules = obj }

使用

整合方面包车型大巴字段设计,笔者在页面上的运用是这么的,我们能够依据自身的字段设计去改良,大约完结进度是那般的

// mixin中的方法, 初始化字段验证规则this._initValidate

怎么构造到全局

经过mixin配置,然后在页面中央银行使 配置为全局方法在页面中调用
挂在到vue实例上,通过this就能够访问

mixins例子

export default { data () { /** * 页面上的可复用的验证规则 */ // 验证号码格式 const CHECK_PHONE = (rule, value, callback) => { let check = this.$validate({label: '号码', value, rules: ['phone']}) if  { callback(new Error } else { callback() } } // 验证号码格式以及不能为空 const CHECK_PHONE_NOTNULL = (rule, value, callback) => { let check = this.$validate({label: '号码', value, rules: ['notnull', 'phone']}) if  { callback(new Error } else { callback() } } // 检测邮箱格式 const CHECK_EMAIL = (rule, value, callback) => { let check = this.$validate({label: '邮箱', value, rules: ['email']}) if  { callback(new Error } else { callback() } } // 检测邮箱格式以及不能为空 const CHECK_EMAIL_NOTNULL = (rule, value, callback) => { let check = this.$validate({label: '邮箱', value, rules: ['notnull', 'email']}) if  { callback(new Error } else { callback() } } return { CHECK_PHONE, CHECK_PHONE_NOTNULL, CHECK_EMAIL, CHECK_EMAIL_NOTNULL } }, methods: { // 初始化验证数据 _initValidate  { const obj = {}, fieldList = formInfo.fieldList // 循环字段列表 for (let item of fieldList) { let type = item.type === 'select' ? '选择' : '输入' if  { if  { obj[item.value] = { required: item.required, validator: item.validator, trigger: 'blur' } } else { obj[item.value] = { required: item.required, message: '请' + type + item.label, trigger: 'blur' } } } else if  { obj[item.value] = { validator: item.validator, trigger: 'blur' } } } formInfo.rules = obj } }}

最后

在品种的系统管理模块中可以看看示例代码:

以上便是本文的全体内容,希望对我们的就学抱有利于,也愿意我们多多照望脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注