Vue-Ant Design Vue-普通及自定义校验实例


Posted in Javascript onOctober 24, 2020

这段时间在使用Ant Design Vue进行项目的前端部分开发,进行一个记录,分享…

Ant Design Vue

Ant Design Vue是 Ant Design 3.X 的 Vue 实现,开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言,Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系,实现了所有Ant Design of React的组件,支持现代浏览器和 IE9 及以上(需要 polyfills)。可以让熟悉Ant Design的在使用Vue时,很容易的上手。

nodejs,npm包括Ant Design Vue安装什么的就不说了,可以百度,之后有时间我会写一篇关于这一套东西的安装教程,关于Ant Design Vue,可以直接查看官方文档:https://vue.ant.design

下面说一下关于Ant Design Vue中的表单校验及自定义校验。

自定义校验

先给一张Ant Design Vue得form表单中不同类型的校验场景图,看看是否有你需要的:

Vue-Ant Design Vue-普通及自定义校验实例

官方提供了 validateStatus, help ,hasFeedback 等属性,你可以不需要使用 Form.create 和 getFieldDecorator,自己定义校验的时机和内容。

validateStatus: 校验状态,可选 ‘success', ‘warning', ‘error', ‘validating'。

hasFeedback:用于给输入框添加反馈图标。

help:设置校验文案。

说明一点: 当你使用Ant Design Vue的使用,经过 Form.create 包装的组件将会自带 this.form 属性

this.form 提供的 关于校验的API如下 :

方法 说明 类型
validateFields 校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件 Function([fieldNames: string[]], [options: object], callback: Function(errors, values))

然后看下Form.Item的参数设置(主要看关于校验的):

参数 说明 类型 默认值
extra 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 string/slot
hasFeedback 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用。 boolean false
help 提示信息,如不设置,则会根据校验规则自动生成 string/slot
validateStatus 校验状态,如不设置,则会根据校验规则自动生成,可选:‘success' ‘warning' ‘error' ‘validating' string

最后是校验规则设置:

Vue-Ant Design Vue-普通及自定义校验实例

相关的api及参数设置介绍完乐,下面上实例

实例

写一个简单的例子

form表单代码:

<a-form style="max-width: 500px; margin: 40px auto 0;" @submit="handleSubmit" :form="form">
<a-form-item
label="密码"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
hasFeedback
>
<a-input
v-decorator="[
'password',
{rules: [{ required: true, message: '请输入密码' },{validator: handlePass}]}
]"
name="password"
/>
</a-form-item>
<a-form-item
label="确认密码"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
hasFeedback
>
<a-input
v-decorator="[
'confirm_password',
{rules: [{ required: true, message: '请输入确认密码' },{validator: handleConfirmPass}]}
]"
name="confirm_password"
/>
</a-form-item>
<a-form-item :wrapperCol="{span: 19, offset: 5}">
<a-button :loading="loading" type="primary" htmlType="submit">提交</a-button>
</a-form-item>
</a-form>

进行一下说明,以确认密码的校验为例:

<a-input
     v-decorator="[
     'confirm_password',
     {rules: [{ required: true, message: '请输入确认密码' },{validator: handleConfirmPass}]}
    ]"
     name="confirm_password"
   />

rules中为一个数组,每一项就是一个校验规则,第一项规则容易理解,但是{validator: handleConfirmPass}是什么的,我们通过上面的校验规则设置(红框处)可以发现,这是当你设置自定义校验的时候需要这么写。注意:callback 必须被调用。

handleConfirmPass 其实就是自定义校验的校验方法。

上js代码:

<script>
export default {
 data () {
  return {
   labelCol: {
    xs: { span: 24 },
    sm: { span: 7 }
   },
   wrapperCol: {
    xs: { span: 24 },
    sm: { span: 13 }
   },
   password: '',
   // form
   form: this.$form.createForm(this)
  }
 },
 methods: {
  handlePass(rule,value,callback){
   this.password = value
   callback()
  },
  handleConfirmPass(rule,value, callback){
   if (this.password && this.password !== value) {
    callback('两次密码输入不一致!')
   }
   // Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
   callback()
  },
  handleSubmit (e) {
   e.preventDefault()
   this.form.validateFields((err, values) => {
    if (!err) {
     console.log(values)
    }
   })

  }
 }
}
</script>

效果图如下:

1.空值提交

Vue-Ant Design Vue-普通及自定义校验实例

2.自定义校验规则生效

Vue-Ant Design Vue-普通及自定义校验实例

好了,这就是关于Ant Design Vue的普通及自定义校验的简单使用。

补充知识:关于 Ant Design of Vue 表单动态赋值 触发验证 问题

关于 Ant Design of Vue 表单动态赋值 触发验证

Ant Design of Vue 中 给表单动态赋值 使用 setFieldsValue 方法 这一点 之前已经介绍过了 ,不了解的可以查找我之前的博客 上面有详细的介绍使用方法

但使用 该方法可能会出现 一个问题 例如本人使用的下拉框触发 change 事件的时候 给表单 动态赋值

这个时候遇到一个问题 就是 触发的同时也触发了表单验证 解决的方法是 在setFieldsValue 方法的外面

加上 this.$nextTick(() => {}) 方法 如图所示

Vue-Ant Design Vue-普通及自定义校验实例

轻松解决 问题 。

以上这篇Vue-Ant Design Vue-普通及自定义校验实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
微信jssdk用法汇总
Jul 16 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
浅谈React碰到v-if
Nov 04 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 #Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 #Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
You might like
PHP 加密与解密的斗争
2009/04/17 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
主治医师岗位职责
2013/12/10 职场文书
自荐信的格式
2014/03/10 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
团拜会主持词
2015/07/04 职场文书
会计岗位工作总结
2015/08/12 职场文书
学习经验交流会总结
2015/11/02 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle