html中简单表单校验不通过不提交后台

html页面如下:


javascript代码如下:


注意:html 页面中的提交按钮的onclick属性格式必须为: return functionName() 否则校验函数会执行,但是无论校验函数是否校验通过,均会提交到后台。

图2为简单的弹出框确认校验。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当子组件的表单未通过校验时,父组件可以通过监听子组件的校验状态来禁用提交按钮或者显示错误提示信息,以避免不合法的数据提交后台。一种常用的方法是在子组件定义一个事件,当子组件表单校验状态发生改变时,触发该事件并传递校验状态给父组件。父组件通过监听该事件来更新提交按钮的状态或者显示错误提示信息。具体实现方法可以参考以下示例代码: 子组件: ```html <template> <el-form ref="form" :model="formData" :rules="rules" @change="handleChange"> <!-- 表单项 --> </el-form> </template> <script> export default { data() { return { formData: {}, // 表单数据 rules: {}, // 表单校验规则 isFormValid: false, // 表单校验状态 }; }, methods: { handleChange() { // 表单校验状态发生改变,触发事件通知父组件 this.isFormValid = this.$refs.form.validate(); this.$emit('form-change', this.isFormValid); }, }, }; </script> ``` 父组件: ```html <template> <child-form @form-change="handleFormChange"></child-form> <el-button :disabled="!isFormValid" @click="handleSubmit">提交</el-button> </template> <script> import ChildForm from './ChildForm.vue'; export default { components: { ChildForm, }, data() { return { isFormValid: false, // 子组件表单校验状态 }; }, methods: { handleFormChange(isValid) { // 子组件表单校验状态发生改变,更新父组件状态 this.isFormValid = isValid; }, handleSubmit() { // 父组件提交逻辑 if (this.isFormValid) { // 提交表单数据 } else { // 显示错误提示信息 } }, }, }; </script> ``` 在上述示例,子组件通过 `handleChange` 方法监听表单项的变化,当表单校验状态发生改变时,触发 `form-change` 事件并传递校验状态给父组件。父组件通过监听 `form-change` 事件来更新 `isFormValid` 的状态,从而禁用或启用提交按钮。在提交表单时,父组件会检查表单校验状态,如果校验通过则提交表单数据,否则显示错误提示信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值