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

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

原创

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

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #数据结构

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前台进行数据校验时，除了必需的校验的外，有时还需要自己定义长度，数字，手机号，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元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DreamsComeTrue1

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

antd 表单自定义校验validator、pattern

汤迷的博客

02-26

4632

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

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

Ant Design Vue 自定义规则校验

最新发布

kurcp的博客

07-04

533

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

ant-design 自定义表单校验

qq_27175079的博客

01-20

791

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

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

Gzyhjf9的博客

06-10

474

Vue-Ant Design Vue表单校验原文出处: 侵权联系删除！！！！

ant 自定义验证规则

weixin_42905479的博客

10-14

266

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

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

01-18

这段时间在使用Ant Design Vue进行项目的前端部分开发，进行一个记录，分享… Ant Design Vue Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue...

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表单校验之自定义服务端校验

aa245455945的博客

08-25

1128

引言本文章涉及的代码块，为实际代码中的截取部分，请各位结合自己的实际情况修改开始这里我的校验需求是编号不可重复，如果重复需要抛出校验信息表单结构部分根据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 添加区分中英文的长度校验功能

10-15

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

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

fly_sheep 的博客

01-18

3811

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

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

旧梦

08-21

5710

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

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

hzxOnlineOk的博客

12-22

3308

在以上基础上，再次假设我们有一个地址组件（就是我们上面提到的，被暴露出来的组件之一，取名为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

5122

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

Ant Design Vue的表单校验（默认校验、自定义校验）

budai_bb的博客

04-12

7653

// 自定义校验函数 // rule：当前被校验对象 // value: 用户输入的值 const check = async (rule, value, callback) => { if (!value) return; if (判断条件) { // 失败时执行 return Promise.reject('内容不合规范...（校验提示）'); } else { // 成功时执行 return Promise.

Vue 验证数组

weixin_37530941的博客

02-05

7763

干后端干前端干啥啥都行，经常遇到附件上传，或者有需要验证数组的情况，想要使用原生rules保持界面的干净，然后老老实实看了下vue是如何自定义验证规则。然后封装一个验证规则，以后好用。方法一、简单处理版本，直接使用rules自带的，但是有点小bug，F12时候会有异常，想图快的将就用吧 1.1需要验证的数组字段加规则rule upFileList: [ { required: true, message: '注意：请上传附件', .........

ant design vue:添加字段交互校验规则

1111111111

03-04

1460

a-form-model自带的:rules="validatorRules"可以给form里每个字段设置校验规则，比如必填，必须为数字等等，但是如果添加字段交互校验规则，比如A字段必须大于B字段，就需要使用函数来校验了。 1、函数校验规则要定义在data下边，return的上边。 2、然后把刚才定义的校验规则加到validatorRules里面去。 // 加在lsl上的校验规则，value是指lsl的值 let handleValidatorLsl = (rule, value, c

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实现表单自定义校验规则的方法。你可以根据自己的需要编写更复杂的校验逻辑，并在自定义校验器函数中进行处理。