Ant Design vue 版本为1.7.2 表单校验的规则

最新推荐文章于 2024-05-10 11:01:23 发布
最新推荐文章于 2024-05-10 11:01:23 发布
阅读量833 收藏
点赞数
分类专栏： 日常的出错改正 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25972233/article/details/127687917
版权

        今天遇到的一个问题,在vue2项目的时候对表单进行写校验的规则,遇到的问题是,校验规则作用不上,本来是搞了半天,然后发现有两种方法,第一种是用Form表单去进行包裹校验,但是这种方法在我没有很清楚的理解,然后我就使用第二种方法

 第二种方法就是用FormModel表单去进行校验,这个标签包裹里面的输入框进行校验的话,和element-ui组件的方法是一样的

 

首先你在a-form-model上 定义rules 前面加上: 表示这个值是动态赋值绑定的:rules="rules"

这里是rules是一个对象,对象里面定义的是每个输入框的验证规则  

:Model是这个表格的数据源, :model = "createObj"

 

 然后需要在a-form-model-item中 定义prop 的值为数据源对象的字段,整体和element-ui的那个组件库的form表单验证规则是一样的,

这里只是判断失去焦点的时候进行校验

如果需要在点击确定按钮的时候进行校验的话,在方法中

 

 

IT邦少
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd vue form表单校验总结
ajaxsync
08-22 5058
Antd vue form表单的使用总结，校验绑定方式，规则定义方式等
Ant Design of Vue v1.7.2 使用教程.pdf
05-23
Ant Design vue v1.7.2 离线文档
Ant Design Vue表单验证基本操作
最新发布
2401_84153285的博客
05-10 155
wrapper-col=“wrapperCol” //为输入控件设置布局样式时，使用该属性，用法同 labelCol。:rules=“rules” //表单验证规则。// name表单名称，会作为表单字段 id 前缀使用。
ant-design-vue 实现表格内字段校验并在提交时进行校验
m0_57263648的博客
11-17 1971
/a-table>在上面的示例中，我们使用了组件来包裹输入框，并设置了和:help属性来控制校验状态和提示信息。我们在上绑定了和，这两个方法用于返回校验状态。根据校验状态的不同，可以为添加不同的样式类，例如'is-valid'和，然后在 CSS 中定义相应的样式。我们在:help上绑定了和，这两个方法用于返回提示信息。根据校验状态的不同，可以返回不同的提示信息，在下方显示。methods: {// 校验行数据if (!// 行数据无效，显示错误提示。
ant-design-vue 表单验证和 validator 自定义表单验证
热门推荐
qq_36437172的博客
02-09 2万+
在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="密...
elementUI中表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验；
CuiCui_web的博客
06-19 3282
现在有这样一个变态的需求吧，在elementUI表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验； 也就是说，必填项为空，我失去焦点，是不能给出提示的，表单也不能标红；失去焦点只能校验其他规则，比如邮箱格式，手机号格式等；当我点击提交或确定按钮，所有的为空的表单给出提示，且标红。 下图为效果图： 如果你看过elementUI底层源码，你就知道这个校验规则是用的第三方开源库，async-validator 当你在规则中写入{ required: true,
VUE+antd-ui使用rules做form表单的校验
nyf_unknow的博客
03-31 3081
项目场景： 知识产权模块 问题描述 给输入框加校验规则 规则参考：https://www.cnblogs.com/lieone/p/11856330.html 解决方案： 模板中规则绑定 :rules=“rulesupload” <a-form-model :model="uploadForm" v-bind="formItemLayout" ref="uploadForm" :rules="rulesupload"> <a-form-model-item
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 添加区分中英文的长度校验功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下功能，
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue 实现 Excel 导入功能 在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue页面表单提交时如何做校验
Keep__Me的博客
11-26 3413
我们在做新增的时候，新增对话框是要加必填校验的，否则就可能会加空数据或者会产生sql的报错。那么这个校验是如何加的呢？下面我们来说一下。
记录ant表单问题之rules
m0_45827438的博客
05-09 469
之前一直以为rules绑定的是-form-item下的a-input里的v-model的值，总是发现没有出现rules。其实rules绑定的是a-form-item里的name属性，通过name属性监测某个输入框是否为必填。一、a-form里的：rules=rules。二、a-form-item里的name属性。需求：需要表单为必填。
antd 校验表单时触发对其他表单的校验
lh_guojw的博客
03-22 1万+
import { Form, Input } from 'antd'; import React, { Component } from 'react'; class ComponentA extends Component { constructor(props) { super(props); } /** * * @param {} rule *...
【Antd】antd如何添加自定义表单的校验
hzxOnlineOk的博客
11-30 1172
【代码】【Antd】antd如何添加自定义表单的校验。
vue3 rules 验证框架的简单入门用法，快速上手
sinat_37792529的博客
04-24 8763
1.ant-design-vuerules <template> // 定义 a-form 表单 添加 动态属性 :model 表单值属性 ，: rulse 表单验证属性 <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" > // *****注意这里的值是 name 不再是 porp****// <a-f..
用vue2-ace-editor做个代码编辑界面
YXXXYX的博客
08-08 7383
最近写前端需要写一个简单的代码编辑器，使用了vue2-ace-editor这个插件；这里简单总结一下使用方法；环境：如果你也是vue2，并且不想再重写这个编辑器组件，可以引入ant-design-vue的组件库：这里是官方文档，可以看文档引入：传送门（注意：查看文档版本是1.7.8）然后就是引入vue2-ace-editor插件：vue2-ace-editor的github仓库：传送门引入方式：剩下步骤官网都写了，当然如果你想直接cv我下面的组件可以不用看，或者作为参考；为了提高复用性，并使代码更简洁，我首
antdesign vue 表单动态校验规则
weixin_45212940的博客
06-17 4757
antdesign vue
element-ui中el-form表单验证，只有点击提交按钮时才进行校验
唐唐唐行的博客
04-04 3432
element-ui中el-form表单验证，只有点击提交按钮时才进行校验
antdesignvue动态添加表单必填校验
01-17
Ant Design Vue 是一个非常受欢迎的 UI 组件库，它提供了丰富的表单组件，包括输入框、下拉选择框等等。要实现动态添加表单必填校验，可以...这样，通过上述步骤，就可以实现 Ant Design Vue 动态添加表单必填校验了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值