ant-design-vue 自定义数据校验注意事项

最新推荐文章于 2024-07-04 15:38:08 发布

原创

最新推荐文章于 2024-07-04 15:38:08 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #数据结构

本文探讨了在Ant Design Vue中进行自定义数据校验的重要性，特别是在验证长度、数字、手机号和电子邮件格式时。通过在validatorRules.sortNo中添加自定义规则，可以实现更灵活的验证逻辑。需注意在实现自定义规则时要确保对value的判空处理，以避免预期之外的错误提示行为。

在前台进行数据校验时，除了必需的校验的外，有时还需要自己定义长度，数字，手机号，email等的校验。此时可以通过自定义的校验规则来实现。通常使用以下方式：

<a-col :span="24">
  <a-form-item label="印象排序" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
    <a-input-number v-decorator="['sortNo',validatorRules.sortNo]" placeholder="请输入排序" style="width: 100%" />
  </a-form-item>
</a-col>

在validatorRules.sortNo中添加下面的自定义的规则，这个validatorRules的结构如下：

sortNo:{
  rules:[
    { required: true, message: '排序不能为空' },
    {validator:validateSortNo,trigger:['change', 'blur']},
  ]
},

这个可写成function，也可以放在data的最前面，但是一定要注意对value的判空，否则会出现数据校验的时候，不能为空的提示不出现，要等输入内容不符合定义的规则时才有错误提示

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DreamsComeTrue1

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

antd 表单自定义校验validator、pattern

汤迷的博客

02-26

4701

1、自定义校验：validator 当输入内容不满足条件时，在表单的校验中不出现错误解决：在写的自定义校验的方法中，加入callback(), 当不满足条件时，要传入‘错误提示的字符’，例如：callback('手机号为必填') 例子：手机号+区号只能自定义校验 1.1、 <a-form-item v-bind="formItemLayout" label="手机号码" :validate-status="phoneStatus" :help="phoneH...

Ant-Design-Vue快速上手指南+排坑

最新发布

破损的天堂鸟博客

08-24

2099

Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件库，适用于各种类型的 Web 应用开发。

参与评论您还未登录，请先登录后发表或查看评论

ant-design-vue表单自定义校验规则以及提交前验证，防止校验未通过发送请求/含a-form-modal-item嵌套校验（详细）

weixin_43242112的博客

06-17

2万+

ant-design-vueForm表单自定义校验规则一、自定义校验规则一、页面代码：二、表单绑定数据以及校验规则二、提交前验证，防止校验未通过发送请求一、自定义校验规则 本处以校验手机号为例。一、页面代码： <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapperCol= "{ span: 4 }"> <a-form-model-ite

Ant Design Vue 自定义规则校验

kurcp的博客

07-04

622

【代码】Ant Design Vue 自定义规则校验。

ant-design 自定义表单校验

qq_27175079的博客

01-20

811

今天遇到一个自定义表单校验问题，按照vue的经验，只需要获取到句柄并执行特定的方法即可。但是ant-design不太熟悉，找了很多答案直接给了个form.validateFields([‘xxx’])，那个form怎么来的不知道，但是我猜测是ref，但是试了不是，后面继续查找总算找到了，记录下来留给有需要的人。核心代码如下： import { Form } from 'antd'; const [form] = Form.useForm(); <Form form={form}

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

谷子的博客

04-09

3万+

这段时间在使用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...

精选资源

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

01-18

ant-design-vue 实现表格内部字段验证功能

10-15

在使用ant-design-vue开发web应用时，经常需要在表格组件中对数据进行输入和编辑。为了确保数据的准确性，对输入字段进行验证是必不可少的环节。在本文中，我们将探讨如何在ant-design-vue中实现表格内部字段的验证...

ant-design-vue3.x的form表单爬坑.pdf

12-16

在Ant Design Vue 3.x版本中，表单的使用与之前版本有了一些显著的变化，特别是对于嵌套表单的处理和验证方式。本文将详细解析这些变化，帮助开发者避免在升级过程中遇到的“坑”。首先，让我们关注的是嵌套表单...

Ant Design Vue 添加区分中英文的长度校验功能

10-15

主要介绍了Ant Design Vue 添加区分中英文的长度校验功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下功能，

ant 自定义验证规则

weixin_42905479的博客

10-14

281

https://www.jianshu.com/p/b51382df3aa1/

Ant Design VUE表单校验之自定义服务端校验

aa245455945的博客

08-25

1185

引言本文章涉及的代码块，为实际代码中的截取部分，请各位结合自己的实际情况修改开始这里我的校验需求是编号不可重复，如果重复需要抛出校验信息表单结构部分根据Ant Design VUE的文档定义好需要的字段 <a-modal :visible="visible" title="项目定义信息" :width="800"> <a-form-model ref="project" :rules="rules" :label-col="{ span: 6 }" :wrappe

Ant Design Vue 添加区分中英文的长度校验

fly_sheep 的博客

01-18

3832

原本的maxLength属性是不区分全角/半角字符的，对于一些可中英文混合输入地方而言不太合适。所以想找一个可区分全角/半角字符的校验，而且要保证一定的可重用性。百度搜了一圈都没找到合适的现成的解决方案，所以自己试着基于v-decorator的自定义校验validator实现了一下，核心代码如下：校验插件： const validators = { /** * 可区分全角字符/半角...

Vue.js — ant-design数组表单验证

旧梦

08-21

5826

一、前言常见的表单验证是对对象中单个字段的验证，那如何对数组中的每一项做到验证呢，效果如下：二、实现首先需要准备好 form 数据和 rules 验证规则 form: { member: [ { name: "", sex: "", age: "" } ], }, rules: { name: { required: true, message: "请输入姓名" }, sex: { required: true, message: "请选择性别"

【antd】如何借助antd Form实现自定义表单校验（模拟antd校验效果）

hzxOnlineOk的博客

12-22

3406

在以上基础上，再次假设我们有一个地址组件（就是我们上面提到的，被暴露出来的组件之一，取名为area.js），需要选择省市区并填写详细地址。假设，我们有一个通用渲染组件，可以渲染多种表单项，但每次仅渲染一个，取名为RenderOne。正是在RenderOne中，他还有一个父级组件CompRender使用。组件，并且在address下面再定义一个。，我们注意到有一个用来自定义校验规则的。以上在Form.Item标签属性中。并写入详细地址输入框组件。

ant-design vue form表单自定义校验规则

qq_41687299的博客

07-28

1万+

1、使用a-form 验证的js-----decorator.js let validateRulesObj = { //自定义校验 phone: { rules: [ { validator: (rule, value, cbfn) => { const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

Ant Design of Vue表单自定义验证validator

mrsun_web

10-21

5194

1.表单验证 1.1rule用法注意：表单必须绑定rules验证规则才能生效在data中声明rules校验规则，具体规则可以查询文档，这里重点说下自定义校验validator 1.2validator用法 validator验证器，可以对格式进行复杂限制，跟rule一样需要设置对应表单项的prop属性，然后绑定validator，validator绑定验证规则变量（注意验证规则变量是处在data的return外面）。且需要注意的是callback回调函数一定要被调用 &l...

ant-design-vue 表单验证和 validator 自定义表单验证

热门推荐

qq_36437172的博客

02-09

3万+

在ant-design-vue中，提供FormModel表单组件，且支持v-model数据绑定，同时可以校验和提交功能的表单。一、表单验证 <a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}" > <a-form-model-item label="密...

ant-design-vue表单自定义校验规则

07-20

对于ant-design-vue表单的自定义校验规则，你可以使用Vue的"自定义校验器"来实现。下面是一个简单的示例： 1. 首先，你需要在Vue组件中定义一个自定义校验器函数，该函数接收两个参数：rule和value。rule是当前校验规则的配置，value是当前表单字段的值。校验器函数需要返回一个Promise对象，通过resolve()来表示校验通过，通过reject()来表示校验失败。 ```javascript // 导入所需的校验规则 import { ValidationRule } from 'ant-design-vue/es/form/Form'; // 定义校验器函数 const customValidator = (rule, value) => { return new Promise((resolve, reject) => { // 自定义校验逻辑 if (value === 'custom') { resolve(); } else { reject(new Error('输入值不合法')); } }); }; ``` 2. 在表单项的rules属性中使用自定义校验器函数。rules属性是一个数组，可以包含多个校验规则。在自定义校验规则中，你可以使用ValidationRule对象提供的方法来定义校验规则的其他配置。 ```javascript <template> <a-form :form="form"> <a-form-item label="自定义校验"> <a-input v-decorator="['customField', { rules: [{ validator: customValidator }] }]"></a-input> </a-form-item>   </a-form> </template> <script> export default { data() { return { form: this.$form.createForm(this), }; }, }; </script> ``` 这样，当用户输入的值不等于'custom'时，校验器函数将返回一个带有错误信息的Promise对象，从而触发表单项的校验错误提示。以上就是使用ant-design-vue实现表单自定义校验规则的方法。你可以根据自己的需要编写更复杂的校验逻辑，并在自定义校验器函数中进行处理。