多个form表单同时校验

博客涉及前端开发,重点围绕Vue和ElementUI展开,但具体内容缺失。Vue是前端框架,ElementUI是基于Vue的组件库,二者结合可高效开发前端界面。

使用场景:一个页面由多个form表单组成,提交的时候要统一校验必填信息,统一提交

        // 校验表单一
        let dispatchValidate = new Promise((resolve, reject) => {
          this.$refs.dispatchForm.validate((valid) => {
            if (valid) {
              // 表单一校验通过后其他逻辑判断
              this.checkEqu();
              resolve();
            } else {
              return false;
            }
          });
        });

        // 校验表单二
        let formValidate = new Promise((resolve, reject) => {
          this.$refs.form.validate((valid) => {
            if (valid) {
              resolve();
            } else {
              return false;
            }
          });
        });

        // Promise.all统一处理
        Promise.all([dispatchValidate, formValidate])
          .then(() => {
            // 后续表单提交操作
            this.confirmPay();
          })
new Promise分别对两个表单校验,最后用Promise.all统一处理,再做后续操作
Ant Design的表单Form)组件具备强大的校验功能,不过引用里未直接提及多层级校验的内容,但可基于其基本校验原理推测多层级校验方法。 ### 多层级校验方法 - **规则定义**:在多层级表单中,每个嵌套的 `Form.Item` 都可通过 `rules` 属性定义校验规则。这些规则是一个数组,每个元素都是一个对象,包含校验类型(如 `required`、`pattern` 等)和错误提示信息等。 - **校验执行**:当表单提交或手动触发校验时,`Form` 组件会遍历所有的 `Form.Item`,依据其 `rules` 属性执行相应校验规则。执行时,会调用内置或用户自定义的校验函数。 - **状态管理与反馈**:`Form` 组件借助内部状态管理,记录每个 `Form.Item` 的校验结果。若校验失败,会在对应的 `Form.Item` 上显示错误提示信息,并阻止表单提交。同时,开发者可通过 `Form` 组件提供的方法获取校验结果,做进一步处理。 ### 示例 以下是一个简单的多层级表单校验示例: ```jsx import React from 'react'; import { Form, Input } from 'antd'; const Demo = () => { const onFinish = (values) => { console.log('Success:', values); }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; return ( <Form name="complex-form" onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="外层字段" name="outerField" rules={[{ required: true, message: '外层字段不能为空' }]} > <Input /> </Form.Item> <Form.List name="innerFields"> {(fields, { add, remove }) => ( <> {fields.map((field, index) => ( <Form.Item {...field} label={`内层字段 ${index + 1}`} rules={[{ required: true, message: '内层字段不能为空' }]} key={field.key} > <Input /> </Form.Item> ))} <Form.Item> <button type="button" onClick={() => add()}> 添加内层字段 </button> </Form.Item> </> )} </Form.List> <Form.Item> <button type="submit">提交</button> </Form.Item> </Form> ); }; export default Demo; ``` 在这个示例中,有一个外层字段和一个可动态添加的内层字段列表。每个字段都有必填校验规则。当表单提交时,会对所有字段进行校验,若有字段校验失败,会显示错误提示信息并阻止表单提交。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值