a标签提交form表单中间校验直接pass

最新推荐文章于 2024-03-15 10:10:57 发布
原创 最新推荐文章于 2024-03-15 10:10:57 发布 · 634 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

探讨了一种在代码执行过程中跳过特定function体的方法，即在满足一定条件时，从queren()方法直接运行到submit，避免执行中间的function体，期待高手分享更深入的实现细节。

场景：如下图所示，当满足queren()方法运行到submit，直接忽略掉中间的function体；

 

特此立贴，期待有大佬指导一二，

antdv a-form的校验方式（手把手 附送上传boundary二进制流方法）
qq_51111703的博客
05-11 1971
a-form校验解决方式（手把手）
element-ui的表单校验；el-form表单校验；el-form表单自定义校验；手机号校验；车牌号校验；车牌号正则校验；手动校验表单某一项；手动清空表单的某一项校验结果
i_am_a_div的博客
08-31 1641
一、基本属性认知： 1. required: true 会有 * ， 但仅是触发最后点击提交按钮时，校验某一项位必填；与输入事件或者选择或者失焦时候 怎么校验无关 （这时候的校验取决于是否写了具体的校验规则） 为false则提交时可不填(默认false) 但是同时取决于validator的callback()返回是空还是返回报错提示 2. validator: 自定义校验方法 需要声明变量和错误提示 3. trigger: 触发校验方法 4. message: 错误提示 5.
a标签提交数据
斌仔的小博客
12-05 453
a标签和button提交数据
vue3+antd table form动态校验必填字段
weixin_37572609的博客
01-09 4504
使用vue3+Antd a-table a-form 动态校验深层字段、自定义校验
Antd ＜a-form＞表单校验：v-model、v-decorator
chenyan0306i的博客
11-16 3213
a-form表单校验
a-form行内表单校验
mengyingqi的博客
03-07 608
【代码】a-form行内表单校验。
angular4中关于表单的校验示例
08-29
Angular4 中的表单校验是指在用户提交表单时对表单数据进行验证，以确保数据的正确性和完整性。在 Angular4 中，表单校验可以通过使用响应式表单和模板驱动表单两种方式来实现。下面将详细介绍 Angular4 中关于表单...
vue表单自定义校验规则介绍
10-18
Vue提供了多种方式来处理表单验证，其中自定义校验规则是一个灵活且强大的功能，允许开发者根据具体需求定制验证逻辑。在本篇文章中，我们将深入探讨如何在Vue中实现表单的自定义校验规则。 首先，让我们看一个简单...
layui 表单标签的校验方法
12-11
layui表单元素的校验只需在元素上加入lay-...另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=”pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义 示例： <div cl
layui插件表单验证提交触发提交的例子
10-16
在这里，`data.form.action`和`data.form.method`分别是表单的提交地址和提交方式。`$(data.form).serialize()`是将表单数据序列化成URL编码的文本，以便于发送给服务器。在服务器返回的结果中，我们可以根据`info....
ValidaForm:表单验证脚本
05-04
验证表 最好的表单验证脚本 Validaform是一个脚本，旨在简化前端和后端的工作，因为它支持 ，AJAX， （选择自定义）等。 安装 validaform.js应该在<body>的末尾并且在之后： [removed][removed] [removed][removed] 无需调用任何脚本即可正常工作 如何使用 在<form>标记中，必须输入以下属性： 必需的 属性 价值 描述 [必需的] method 发布/获取 这是用于发送表格信息的方法类型 可选的 class 阿贾克斯 如果您想使用AJAX发送表单 [必需的] 如
【HTML】使用a标签以post方式提交
mxk4869的博客
04-03 2050
在HTML中a标签默认是使用GET方式跳转的，如果需要使用post跳转可以这样用： 一：增加一个form表单 <span style="font-family:SimSun;font-size:18px;"><body> <a href="javascript:doPost("addStudent.action", {"name":"张三"})">...
表单校验。
weixin_44637905的博客
03-30 339
1、表单选择器 :text案例 当加了下面代码以后 <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $(":input").css("background-color","#D32C47"); $(":te
Form表单密码校验
lmf13992427957的博客
04-14 2309
1.在Form表单新建一个密码框 <a-form-item label="密码" v-model:value="value" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-input-password placeholder="请输入用户密码" v-model="testModel" v-decorator="['password', validatorRules.password]"
ant design vue常用弹窗+表单
lj_qmzhnT_T的博客
06-13 2792
<template> <div> <a-modal title="标题" :visible="visible" :width="600" :confirmLoading="confirmLoading" :maskClosable="false" @ok="handleOk" @cancel="handleCancel" > <template sl.
a-form（设计重置，赋值，校验）
weixin_44161385的博客
12-29 6344
1.在页面使用a-form 2.在beforeCreate中创建form beforeCreate() { this.form = this.$form.createForm(this); }, 3.使用 v-decorator 用idCard绑定input的值。 rules <a-form-item label="身份证号码" v-bind="formItemLayout" style="width: 40%;"> <a-input
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}$/
form表单如何实时校验其他组件
m0_61964123的博客
03-15 502
前端开发中经常使用form表单进行信息的提交。在某些场景下，form表单内的控件可能是自己封装的组件（例如封装的富文本编辑器，选人组件等），那么针对这些组件，如何实现实时校验呢？ 以vue2 + Ant Design of Vue1.7.8为例 ： 校验规则 自定义的校验方法 实时校验
antd vue form表单校验总结
ajaxsync
08-22 7018
Antd vue form表单的使用总结，校验绑定方式，规则定义方式等
vue2 form表单validate提交校验,保存按钮无反应
最新发布
08-27
在使用 Vue2 开发表单时，提交校验失败导致保存按钮无反应，通常是因为表单验证逻辑中某些关键环节未正确处理。以下是几种常见的原因及对应的解决方案： ### 问题分析与解决方案 #### 1. 表单引用（ref）未正确设置 确保 `<el-form>` 组件中设置了 `ref="form"` 属性。这是调用验证方法时必须的引用标识，否则无法通过 `this.$refs.form.validate()` 触发表单验证[^1]。 #### 2. 表单模型绑定方式错误 `<el-form>` 组件应使用 `:model` 绑定表单数据对象，而不是使用 `v-model`。`v-model` 通常用于单个值的双向绑定，而 `:model` 用于绑定整个表单数据对象，这是 Element UI 的要求。 #### 3. 自定义验证函数未正确返回 callback 如果使用了自定义验证函数（如 `validatePass`），必须确保所有执行路径都能调用 `callback()`。例如，在条件判断中如果没有调用 `callback()`，会导致验证流程阻塞，从而无法触发后续操作（如保存按钮的提交逻辑）。 以下是一个正确编写的自定义验证函数示例： ```javascript const validatePass = (rule, value, callback) => { if (this.form.pass1 === undefined || this.form.pass1 === '' || this.form.pass2 === undefined || this.form.pass2 === '') { callback(new Error("请输入密码")); } else if (this.form.pass1 !== this.form.pass2) { callback(new Error("两次密码不一致")); } else { callback(); } }; ``` #### 4. 验证规则未正确配置 确保在 `rules` 中正确引用了自定义验证方法。例如： ```javascript rules: { password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ] } ``` #### 5. 表单重置逻辑影响验证状态 如果在提交之前调用了表单的重置方法（如 `resetFormData()`），可能会导致表单验证状态被清除，从而影响提交逻辑。建议在提交失败时不要立即重置表单，而是保留当前状态以便用户修改[^4]。 #### 6. 未正确调用验证方法 确保在提交按钮的点击事件中正确调用了验证方法。例如： ```javascript submitForm() { this.$refs.form.validate(valid => { if (valid) { // 提交逻辑 console.log('验证通过，提交表单'); } else { console.log('验证失败'); return false; } }); } ``` #### 7. 使用第三方验证库（如 Vuelidate 或 VeeValidate） 如果项目中使用了第三方验证库（如 Vuelidate 或 VeeValidate），需要确保规则配置正确，并且在提交时触发了验证流程。例如，使用 VeeValidate 时可以通过 `errors.first('fieldName:ruleName')` 来获取特定字段的错误信息，并进行相应的提示处理[^3]。 #### 8. 表单组件未正确引入或配置 确保使用的 UI 框架（如 Element UI、iView 等）已正确引入，并且 `<el-form>`、`<el-form-item>` 和 `<el-input>` 等组件的属性配置无误。例如，`<el-form-item>` 必须包含 `prop` 属性，且其值应与 `rules` 中的字段名一致。 ### 示例代码 以下是一个完整的 Vue2 表单验证示例： ```html <template> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="confirmPassword"> <el-input v-model="form.confirmPassword" type="password"></el-input> </el-form-item> <el-form-item> <el-button @click="submitForm">保存</el-button> </el-form-item> </el-form> </template> <script> export default { data() { const validatePass = (rule, value, callback) => { if (this.form.password === undefined || this.form.password === '' || this.form.confirmPassword === undefined || this.form.confirmPassword === '') { callback(new Error("请输入密码")); } else if (this.form.password !== this.form.confirmPassword) { callback(new Error("两次密码不一致")); } else { callback(); } }; return { form: { password: '', confirmPassword: '' }, rules: { password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ], confirmPassword: [ { required: true, message: '请确认密码', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('表单提交成功'); } else { console.log('表单验证失败'); return false; } }); } } }; </script> ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值