使用react写表单组件,表单验证如果做比较好?

发布于 2022-09-04 08:26:41 字数 79 浏览 35 评论 0

使用react写了一个基础组件input ,使用地方很多,有的地方需要检验只能输入数字,有的地方需要检验只能输入汉字,那么怎么做表单检验比较好?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

殤城〤 2022-09-11 08:26:41

可以参考一下蚂蚁金服的组件库ant-design里面的Form,是基于react-componentformform-validation,这是我见过的最好用,对业务兼容性最好的表单组件了。

我的影子我的梦 2022-09-11 08:26:41

可以在组件内部把数字和汉字用正则匹配好,然后通过props传入不同的属性来验证各个不同的值,然后通过回调函数来做表单提交

稀香 2022-09-11 08:26:41

私以为,表单验证分为实时验证和非实时验证。那么触发表单验证的时机控制就很重要了。如果使用了react来写组件,那么在input发生onChange事件时往往需要setState,这时如果触发表单验证,就是实时验证了。如果想做到非实时验证,例如用户在点击提交时再提示用户错误信息的话,就要加逻辑判断以确定是否触发表单验证了。

浅唱々樱花落 2022-09-11 08:26:41

github上查找async-validate

你好,陌生人 2022-09-11 08:26:41

当然是在父组件给个参数阿

<Input testNum={true} />

在子组件里面去写这个方法,如果给了这个props或者这个props=true的时候就去执行这个方法
例如

//在onChange的方法changeValue中
changeValue(){
    if(this.props.testNum){
        //用你的正则去匹配这个(e.target.value)
    }
}

类似于这样

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文