element框架的el-form组件validate方法不执行

检查自己的自定义验证规则是否每一条逻辑都能够执行到callback函数!!!

这是一段错误的代码,欲实现 1.当用户不输入网址的时候不做处理,直接跳出验证;2.输入网址的时候验证

// 验证官网web的规则
export const checkWeb = (rule, value, cb) => {
  // 如果取反为真,说明其是空字符串、null、undefined等,说明用户并不想现在填写
  if (!value) {
    return cb()
  }
  // 验证官网的正则表达式
  const regWebFormat = /^(http|https|www)(\S{6,250})$/
  if (!regWebFormat.test(value)) {
    // 当时是这么写的
    cb(new Error('网址格式错误!'))
  }
}

本来开心大吉的开始做数据提交了,却卡在这里很久很久。[泪奔][泪奔][泪奔]

原因只是因为当输入正确的网址的之后,没有调用callback函数的逻辑控制,从而导致不报错,不调用validate方法。[泪奔][泪奔][泪奔]

(疯狂的检查代码、测试正则长达数小时,原来只是没有调用callback函数…[无语]

修改后代码

// 验证官网web的规则
export const checkWeb = (rule, value, cb) => {
  // 如果取反为真,说明其是空字符串、null、undefined等,说明用户并不想现在填写
  if (!value) {
    return cb()
  }
  // 验证官网的正则表达式
  const regWebFormat = /^(http|https|www)(\S{6,250})$/
  if (regWebFormat.test(value)) {
    // 正确格式的web网站
    return cb()
  }
  cb(new Error('网址格式错误!'))
}
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-formElementUI 中的表单组件,可以方便地实现表单数据收集、校验和提交等功能。在封装 el-form 组件时,可以按照以下步骤进行: 1. 创建一个名为 MyForm组件,引入 el-form 组件: ```javascript <template> <el-form ref="form" :model="formData" :rules="formRules"> <!-- 表单项内容 --> </el-form> </template> <script> import { Form } from 'element-ui'; export default { components: { [Form.name]: Form, }, props: { // 表单数据 formData: { type: Object, required: true, }, // 表单校验规则 formRules: { type: Object, required: true, }, }, }; </script> ``` 2. 将表单项的内容作为 MyForm 组件的插槽内容,例如: ```javascript <template> <el-form ref="form" :model="formData" :rules="formRules"> <slot></slot> </el-form> </template> ``` 3. 在 MyForm 组件中添加提交表单的方法: ```javascript <template> <el-form ref="form" :model="formData" :rules="formRules"> <slot></slot> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> import { Form } from 'element-ui'; export default { components: { [Form.name]: Form, }, props: { formData: { type: Object, required: true, }, formRules: { type: Object, required: true, }, }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过,提交表单数据 this.$emit('submit', this.formData); } }); }, }, }; </script> ``` 4. 在使用 MyForm 组件的父组件中,使用 v-model 双向绑定表单数据,并监听 MyForm 组件的 submit 事件进行表单提交: ```javascript <template> <my-form v-model="formData" :form-rules="formRules" @submit="handleSubmit"> <!-- 表单项内容 --> </my-form> </template> <script> import MyForm from './MyForm'; export default { components: { MyForm, }, data() { return { formData: { // 表单数据结构 }, formRules: { // 表单校验规则 }, }; }, methods: { handleSubmit(formData) { // 提交表单数据 }, }, }; </script> ``` 这样,一个简单的 el-form 组件封装就完成了。在实际开发中,可以根据具体需求添加更多的功能和特性,如自定义表单项、表单项联动、表单数据初始化等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值