自定义校验表单

最新推荐文章于 2024-04-02 18:17:12 发布
最新推荐文章于 2024-04-02 18:17:12 发布
阅读量218 收藏
点赞数 1
分类专栏： 不懂就问系列 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Admin_yws/article/details/117422378
版权

依赖包

  • vue 2.x
  • ant design vue 1.75

功能描述

校验表单时，后台返回状态码为400类型的错误，需将错误内容显示到对应表单下。效果如下图：
在这里插入图片描述

实现逻辑

前端可以通过err.response拿到错误信息的响应体，前后端约定统一名称的键值，具体实现代码如下：
1.处理err.reponse,去掉键值不为空的属性（tips：此为error.js工具类）
在这里插入图片描述
2.在表单界面引入处理错误工具类，data中声明errObj，然后在dom中绑定对应属性
在这里插入图片描述
在这里插入图片描述

如上图代码，即可实现将后台错误显示到对应表单下，补充一下注意点，form的声明放在data中，不要挡在beforeCreate中，否则不生效，onValueChange是为了对应表单值改变时清空验证规则。为了显示表单原有的验证规则（即v-decorator 中的rules的message）validateStatus与help属性要么为undefined要么为后台返回的错误信息，否则表单原有的验证无法正常的触发。

如果有帮助到您的话，麻烦动动小手点个赞！
谢谢啦
在这里插入图片描述

新津之虎--曹达华
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给自定义组件加上v-decorator验证
月亮船
10-12 1755
目录前言1. 了解v-decorator的本质和绑定的过程2. 例子：给自定义的列表组件绑定v-decorator 前言 在项目中用ant-design-vue 来做开发，用到的表单涉及到自定义组件，想用v-decorator的机制来统一的做表单验证，通过查询antdv的官网和vue的官网有了思路,v-decorator本质上就是在v-modal的基础上加了一些验证相关的规则和功能，而v-modal是通过对组件value和 onchange函数的管理来实现表单数据的双向绑定的，那我们只要给自定义组件添加va
vue表单自定义校验规则介绍
10-18
Vue提供了多种方式来处理表单验证，其中自定义校验规则是一个灵活且强大的功能，允许开发者根据具体需求定制验证逻辑。在本篇文章中，我们将深入探讨如何在Vue中实现表单的自定义校验规则。 首先，让我们看一个简单...
ant-desigin-vue中form表单的使用
热门推荐
weixin_44051815的博客
03-07 4万+
form表单的使用 form表单之获取表单的数据 创建表单 通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验； <template> <a-form @submit="handleOk" :form="form"> // :form="form" 必须优先...
ant design of vue v-decorator失焦时校验
m0_46550764的博客
05-06 1171
校验手机号 本文以校验手机号为例 1、标签使用失焦事件 <a-input v-decorator="['reporterTel']" :disabled="disabled" @blur="validatePhoneBlur" /> 2、通过对e.target.value校验后，生成错误信息 validatePho
ant design vue 之 v-decorator
dengfenglai825的博客
02-04 1万+
1.在 template 中直接使用 required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验 <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" /> 2.在 script 中设置校验规则 template 部分 <a-input v-decorator="['password', val
Antd Vue 自定义表单验证方式
野生松
03-12 1110
简单粗暴直接上代码: <a-form-item label="用户名" :label-col="{ span: 5, offset: 1 }" :wrapper-col="{ span: 15 }" > <a-input ...
Angular在模板驱动表单中自定义校验器的方法
08-29
本篇文章将详细讲解如何在模板驱动表单中创建自定义校验器。 首先，了解Angular的校验机制是关键。在Angular中，表单验证是通过NgModel指令和Validator服务进行的。NgModel指令负责收集表单控件的值，并利用注册在...
vue 使用自定义指令实现表单校验的方法
10-18
本文将探讨如何使用自定义指令来实现表单校验，这对于简化前端开发过程，提高用户体验至关重要。表单校验通常涉及验证用户输入的数据是否符合预设的规则，例如邮箱格式、电话号码格式或特定的正则表达式。 首先，让...
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 中的表单校验 v-decorator
cg182235的博客
01-16 8895
ant design vue 中的表单校验 v-decorator 1.v-decorator和v-model区别 v-decorator在我看来更加适合于有验证的操作，比如不为空，唯一值，只能是数字等等。而v-model更加适合用来定义一些组件返回的接收参数，更好处理和获取，以及一些默认隐藏或者不显示但保存或修改需要用到的参数。 2.v-decorator的用法 部分测试代码 <a-form-item label="name" :labelCol="labelCol" :wrapperCol="wr
自定义表单验证
05-13
简单的js表单验证 <script type="text/javascript"> function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入用户名！"; return false; } else{ for(var i=0; i<userN.length;i++) { var un=userN.substring(i,i+1); if(!(un>="a" && un<="z") && !(un>="A" && un<="Z")){ document.getElementById("nerror").innerHTML="用户名中不能包含数字与特殊字符！"; return false; } } document.getElementById("nerror").innerHTML=""; return true; } } function validatePW(){ var userPW=document.myform.userPassWord.value; if(userPW.length==0){ document.getElementById("pwerror").innerHTML="请输入密码！"; return false; } else if(userPW.length<6){ document.getElementById("pwerror").innerHTML="密码长度不能小于6位并且不能包含特殊字符" } } function validate(){ if(validatename() && validatePW()) { return true; } return false; } </script>
表单自定义校验规则
qq_53145332的博客
06-27 1275
element-ui自定义表单验证
Vue常规表单校验规则与自定义表单校验
Asgfcsdn的博客
03-06 3026
Vue常规表单校验规则与自定义表单校验
Form表单自定义验证规则
hhhhhhaaaaaha的博客
11-10 1554
工作中遇到的小问题积累
【element】常用 El-Form 自定义表单校验规则实战
最新发布
九日的博客
04-02 1666
电话号码校验// ...{ required: true, message: '电话号码不能为空', trigger: 'blur' },// 匹配中国大陆手机号码if (!callback(new Error('请输入正确的电话号码'));},},],},// ...正整数和零校验{ required: true, message: '必须输入正整数或零', trigger: 'blur' },if (!
表单验证：自定义校验规则
weixin_52268321的博客
04-19 472
实现表单中一个输入框，不能输入大于30的数字
自定义表单校验
progammer10086的博客
11-28 961
上篇博客简单介绍了validate的使用，但是在有些时候validate无法满足我们的需求，比如说校验账号是否已经存在或者邮箱是否已经被注册了，这个时候就需要自己写表单校验了，配合着validate使用功能还是非常强大的（代码有点多，其实非常简单）。 首先是引入validate插件和jquery插件，然后通过ajax异步校验的方式进行校验，这里直接上代码 &lt;%@page content...
el-form 自定义校验规则
anny_mei的博客
11-11 5106
//自定义校验规则 var checkIdCard = (rule, value, cb) => { const regIdCard = /^[0-9A-Za-z]+$/; if (regIdCard.test(value)) { return cb(); } cb(new Error('只能输入数字或字母')); }; datacode: [ { required: true, ...
自定义form表单验证
hogwarts_ziqi的博客
08-02 478
表单验证通常往往用于一些信息填写完成以后,前端提交到服务器之前的一个自检过程，比如用户输入的手机号是都正确？用户输入的邮箱是否正确？当使用form表单时，基础的一些验证满足不了我们项目中的需求时，这时候我们就需要去自定义验证规则。现在我们来定义一个在项目中使用过的表单验证，来校验我们输入的富文本内容是否为空，包括空格。form表单校验根据自己的需求不同，可以自己定义校验规则，从而更灵活的满足需求。**email**校验邮箱格式。为什么要自定义form表单验证？如何自定义form表单验证？...
前端表单自定义校验时间
09-22
前端表单的自定义校验是通过定义验证规则和校验函数来实现的。在Vue.js和element-ui中，可以使用validator属性来定义验证规则，并通过校验函数来判断是否通过验证。以下是实现前端表单自定义校验的一般步骤： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值