表单数据校验

本文介绍了一个表单验证类的实现细节,包括服务器端验证规则设置、错误消息处理及客户端JavaScript实时验证方法。该验证类提供了丰富的验证功能,如必填项检查、电子邮件格式验证等,并实现了客户端与服务器端的双向验证流程。

分为客户端和服务器端

 

服务器端

validation类

验证

结果处理

有错误返回表单并提示error_string

 

客户端

表单提交处onsubmit="return checkform()"

并且可以在每个表单单独验证如onblur="check_name()"

### 父子组件间表单数据校验的方法及实现 在 Vue.js 中,父子组件之间的表单数据校验可以通过多种方式实现。以下是详细的说明: #### 1. 子组件中的表单校验逻辑 子组件通常负责自身的表单校验逻辑。可以利用 `props` 接收来自父组件的数据,并通过 `$emit` 将校验状态传递回父组件。 ```vue <template> <div> <a-form :model="formState" :rules="rules" ref="form"> <a-form-item name="faqiren" label="发起人" labelAlign="right"> <a-input v-model:value="formState.faqiren" /> </a-form-item> </a-form> </div> </template> <script> import { reactive, toRefs } from 'vue'; export default { props: ['initialData'], setup(props) { const state = reactive({ formState: { faqiren: props.initialData || '', }, }); const rules = { faqiren: [ { required: true, message: '请输入发起人', trigger: 'blur' }, ], }; function validate() { return new Promise((resolve, reject) => { this.$refs.form.validate((valid) => { if (valid) resolve(true); else reject(false); }); }); } return { ...toRefs(state), rules, validate, }; }, }; </script> ``` 此部分实现了子组件内的表单校验功能[^3]。 --- #### 2. 父组件调用子组件的校验方法 父组件可以通过 `ref` 访问子组件实例并调用其校验方法。 ```vue <template> <div> <child-component ref="childForm" :initial-data="formData"></child-component> <button @click="handleSubmit">提交</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { formData: { faqiren: '', }, }; }, methods: { async handleSubmit() { try { await this.$refs.childForm.validate(); console.log('表单校验成功'); // 执行后续操作 } catch (error) { console.error('表单校验失败:', error); } }, }, }; </script> ``` 在此代码中,父组件通过 `this.$refs.childForm.validate()` 调用了子组件的校验方法[^1]。 --- #### 3. 使用事件流进行双向通信 除了直接调用子组件方法外,还可以通过 `$emit` 实现更灵活的交互模式。 ##### 子组件修改: 当校验完成后,主动向父组件发送消息。 ```javascript function validate() { return new Promise((resolve, reject) => { this.$refs.form.validate((valid) => { if (valid) { this.$emit('validated-successfully', true); // 发送成功信号 resolve(true); } else { this.$emit('validation-failed'); // 发送失败信号 reject(false); } }); }); } ``` ##### 父组件监听事件: 父组件可以在模板中绑定事件监听器。 ```vue <child-component ref="childForm" :initial-data="formData" @validated-successfully="onSuccess" @validation-failed="onFailure" ></child-component> <button @click="triggerValidation">触发校验</button> <script> methods: { triggerValidation() { this.$refs.childForm.validate(); // 触发校验 }, onSuccess(validatedSuccessfully) { console.log('校验成功:', validatedSuccessfully); }, onFailure() { console.error('校验失败'); }, }, </script> ``` 这种方式允许父组件被动响应子组件的状态变化[^2]。 --- ### 总结 以上三种方法分别适用于不同的场景需求: - **直接调用子组件方法**适合简单的同步校验流程。 - **事件驱动机制**更适合复杂的异步或多级反馈场景。 - 结合两者可以根据实际业务需求设计更加健壮的解决方案。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值