首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react-hook-form控制器onBlur回调不触发验证

react-hook-form是一个用于处理表单验证的库。它提供了一种简单且灵活的方式来管理表单状态和验证规则。在使用react-hook-form时,如果控制器的onBlur回调不触发验证,可能是由于以下几个原因:

  1. 表单控件没有正确绑定到react-hook-form的控制器中。确保每个表单控件都使用register方法进行注册,并将其绑定到相应的控制器中。例如,对于一个input元素,可以使用register方法将其注册并绑定到控制器中。
  2. onBlur事件没有正确地传递给表单控件。确保在表单控件上设置了正确的onBlur事件处理程序,并且该处理程序被正确地传递给了react-hook-form的控制器。
  3. 验证规则没有正确地定义。在react-hook-form中,可以使用rules属性来定义验证规则。确保为每个需要验证的表单控件定义了适当的验证规则。

如果以上步骤都正确执行,但仍然无法触发验证,可以尝试以下解决方法:

  1. 检查react-hook-form的版本是否是最新的。有时,旧版本可能存在一些已知的问题,升级到最新版本可能会解决问题。
  2. 检查控制器的配置选项。react-hook-form提供了一些配置选项,例如mode和reValidateMode,可以影响验证的行为。确保这些选项被正确地配置。
  3. 检查表单控件的其他事件处理程序。如果表单控件上还有其他事件处理程序(例如onChange),可能会干扰onBlur事件的触发。确保其他事件处理程序不会阻止onBlur事件的触发。

总结起来,当react-hook-form控制器的onBlur回调不触发验证时,需要确保表单控件正确绑定到控制器中,正确传递onBlur事件处理程序,并且验证规则正确定义。如果问题仍然存在,可以尝试升级react-hook-form的版本或检查其他事件处理程序是否干扰了onBlur事件的触发。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

快来使用 React-Hook-Form 搭建强大的React表单

库开始: npm i react-hook-form 使用 useForm hook 要使用 react-hook-form,我们只需要调用 useForm 钩子即可。...style={styles.input} placeholder="Email" /> 对于password的register函数,我们将required设置为true, minlength设置为6,设置...默认的验证只在提交表单时执行。 我们可以通过给useForm传递一个对象来改变这一点,我们可以在需要执行验证时设置模式:onBlur、onChange或onSubmit。...每当用户'失去焦点'或点击远离输入,onBlur将使验证运行。onChange是用户输入时验证,onSubmit是表单提交时验证。...对于我们的表单,让我们选择 onBlur : const { register, handleSubmit, errors } = useForm({ mode: "onBlur", }); 请注意

3.7K21

Ajax 技术学习 (Java EE 实现) —— 用户账户的验证

同步:我们正常访问网页的时候,都是点一个链接,页面刷新好了,就可以看到我们想看的数据 异步:页面向服务器发送请求之后不必等待返回结果,服务器返回的结果会由专门的函数来处理结果 函数【补充】:...事件,进行账号 非空验证 编写 XMLHttpRequest 对象 创建 http 请求 把文本框的内容发送给 http 请求的目标 指定函数 编写回函数 发送 http 请求 将回函数得到的内容..."> // onblur 触发事件,账号非空验证 function checkUserExit() { // 我们只验证账户的合法性 var username = document.getElementById...设置在服务器完成后要运行的函数 2. 设置请求信息 3....然后服务端在返回数据的时候,又出现了了问题,又是找 json 格式数据返回,xml 数据格式返回,最后是通过输出流,写入数据给 ajax 的函数,这样就接收到了数据 3.2 学习参考 ajax

1.8K30
  • 神奇的Ajax

    除去下面我所讲的,还有很多,看下面这张图,感兴趣的可以去搜索 无刷新:刷新整个页面,只刷新局部 无刷新的好处:       1、 只更新部分页面,有效利用带宽       2、 提供连续的用户体验       ...) 发送请求 content参数指定请求的参数 setRequestHeader(header,value) 设置请求的头信息 常用属性:         onreadystatechange:指定函数...实现无刷新用户名验证 当用户名文本框失去焦点时,发送请求到服务器,判断用户名是否存在 如果已经存在则提示:“用户名已被可用” 如果不存在则提示:“用户名可以可用” 使用文本框的onBlur事件        ...使用Ajax技术实现异步交互         2、创建XMLHttpRequest对象         3、通过 XMLHttpRequest对象设置请求信息        4、 向服务器发送请求 创建函数...catch (e) { } } } } 使用Ajax进行处理-checkname.jsp         1、创建XMLHttpRequest对象         2、设置在服务器完成后要运行的函数

    58910

    React Hook form 表单校验

    官网:react-hook-form 真的非常好用,个人觉得。 原生input,form多好啊。也可以结合ant 等的表单进行使用,更多的校验规则也可以指定别的库。 更多api可以查看官网。...妙的是,可以直接返回一个函数让我们进行整个被注册表单元素的所有键值对象 {name:,value:} 我们需要编写函数进行提交就ok。...} from 'react-router-dom'; import useForm from 'react-hook-form'; import Toast from '....minLength:2, })}/> {errors.username&&Toast.error('2-6字符')} 使用ref进行这个input框的注册, 并且指定它的一些校验规则:可以是一个验证规则...如果不通过验证就会返回一个错误对象。 我们要使用这个错误对象,需要通过使用name属性来获取对应的错误消息。 我们可以进行错误的设置,也可以进行错误的清除。

    8.8K31

    关于redux-saga中take使用方法

    先看看介绍: take   take的表现同takeEvery一样,都是监听某个action,但与takeEvery不同的是,他不是每次action触发的时候都相应,而只是在执行顺序执行到take语句时才会相应...而take则不一样,我们可以在generator函数中决定何时相应一个action,以及一个action被触发后做什么操作。...={this.blur.bind(this)}/>          ) } 页面上有一个input,绑定了两个方法,第一个是onchange方法,一个是onBlur方法, 当input值改变...但是因为遇到了take的方法,不能往下继续执行了(暂停了),如果这里的take换成了takeEvery则大有不同,函数会继续执行,就是下面的两个console会执行, 而takeEvery执行的方法则放在它的里了...接下来,如果input失去焦点后,则会执行onBlur方法,此时调用this.props.dispatch({type:'takeBlur'}); 在takeInputChange里的take因为监听到了

    1.9K50

    React--10: 组件的三大核心属性3:refs与事件处理

    字符串形式的ref 首先这种形式是推荐使用的。...形似的ref ref 中写回函数,传入的参数是什么呢?我们打印看一下。...关于 refs 的说明 如果 ref 函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。...通过将 ref 的函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。 内联的写法 首先什么是内联函数?如下ref中的函数就是内联函数。...class 的绑定函数的写法 通过将 ref 的函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。

    1.1K30

    STM32CubeMX实战教程(三)——外部中断(中断及HAL_Delay函数避坑)

    外部中断 前言 材料 NVIC 新建及配置工程 外部中断和事件中断 NVIC配置 进入代码 函数 HAL_Delay()分析 下载验证 结语 前言 学单片机的,相信对中断的概念都已经了如指掌了...MDK NVIC NVIC(嵌套向量中断控制器)。...至于 HAL_GPIO_EXTI_Callback(GPIO_Pin) 呢,就是传说中的函数了,好我们进去看看。...到这里,我就分析的一遍函数,其实总结一下就是:我们在开发的时候已经不需要去理会中断服务函数了,只需要找到这个中断函数并将其重写即可 而这个函数还有一点非常便利的地方这里没有体现出来,就是当同时有多个中断使能的时候...,STM32CubeMX会自动地将几个中断的服务函数规整到一起并调用一个函数,也就是无论几个中断,我们只需要重写一个函数并判断传进来的端口号即可,还是非常方便的。

    3.9K21

    vue封装带提示框的单选多选文本框组件

    对于多选,此时不应该关闭提示框,所有问题的关键在于如何实现点击提示选项而隐藏提示框。 ?...**问题2:**阻止冒泡,如果组件的父容器已经阻止了冒泡,则无法触发在body上绑定的关闭方法,需要针对父容器单独处理。...$nextTick: 在vue官方深入响应式原理中说明了 vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是在下次 DOM 更新循环结束之后执行延迟,在修改数据之后使用 $nextTick...,则可以在中获取更新后的 DOM,官方示例:https://cn.vuejs.org/v2/guide/reactivity.html#search-query-sidebar focusEvent...为了避免循环更新,此处只对输入值添加watcher监听器,用户手动输入数据,触发监听器更新选中状态;用户选择或取消选择选项,则直接更新对应的输入值。 ?

    7.8K30

    day16_ajax学习笔记

    异步:发送请求后不等待返回结果,由函数处理结果。 JavaScript 中 XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力。...content) 发送请求   content参数:指请求的参数 setRequestHeader(header, value) 设置请求的头信息 三、常用属性 onreadystatechange: 指定函数...: 使用文本框的onblur事件(失去焦点事件) 使用Ajax技术实现异步交互 a) 获取用户名 a) 创建 XMLHttpRequest 对象 b) 处理响应结果,创建函数,根据响应状态动态更新页面...// 创建XMLHttpRequest对象 var xhr = getXMLHttpRequest(); // 处理响应结果,创建函数...email")[0]; // 创建XMLHttpRequest对象 var xhr = getXMLHttpRequest(); // 处理响应结果,创建函数

    1.1K31

    移动端app开发问题及理解

    鼠标按下 onmouseup 鼠标按键抬起 onmouseover 鼠标进入某个元素 onmousemove 鼠标移动到元素 onmouseout 鼠标离开元素 onfocus 元素得到焦点 onblur...singleTap 手指碰一下屏幕触发 doubleTap 手指双击屏幕触发 swip滑动类事件 swipe 手指在屏幕上滑动触发 swipeLeft 手指在屏幕上左滑触发 swipeRight...手指在屏幕上右滑触发 swipeUp 手指在屏幕上上滑触发 swipeDown 手指在屏幕上下滑触发 vant组件使用过程中遇到的问题 弹框dialog组件确认函数 最开始我绑定的是confirm...,点击按钮打开模态框触发,点击确定触发,点击取消触发。...可以改用beforeClose事件 函数有两个参数,第一个判断点击的是确认按钮还是取消按钮。第二个感觉是可以关闭模态框 移动端消息推送 消息推送跟设备走还是跟人走?

    3.8K10
    领券