微信小程序中多个input如何方便的获取, 检测验证然后提交?(双向绑定?)

fcxh
  • 434

图片描述

随便举个例子,上面四个表单,做到

提交前进行检测是否为空,是否正确(如18位身份证,11位手机号等等)

其实用双向绑定非常合适,可是似乎小程序中并没有像vue中的双向绑定操作。

那么,我打算用,bindBlur事件,针对每个input都绑定这个函数,然后在处理函数中把value存起来,,提交前,检测这些值即可。

但是:这样的话,有多少个input就得些多少个这样的事件,逐一处理并存储,未免太不优雅。

想问问大家,一般像这样常见的需求,最佳实践是什么,或者说,大家是如何处理的。

回复
阅读 10.9k
3 个回答

不需要一个个的取所有input,可以通过 <form/>在触发submit时一次获取所有表单项的键值对,见文档https://mp.weixin.qq.com/debu... ,不过这样子是没法实时验证,只是作为“提交前统一验证”,如果要做体验好一些的实时验证并提示,还是需要通过input或blur事件不断监听来验证。

javascript有原生验证api你可以直接用,没有框架的时候就用原生,我是这么做的

刚刚也遇到过这样的问题
说说需求吧:需求是根据货柜的数量输出对应数量的input

clipboard.png

但是input 只能绑定到一个input事件回调函数

解决办法:

关于获取数据:保存每一个input 的值改成一个数组

clipboard.png

并且初始化它的值

给每一个input 赋予一个id 属性,属性的值是在视图层wx:for 输出的时候的{{index}}

于是就可以在input 事件的回调函数里面 通过 e.target.id 判断当前是哪一个输入框的值 保存到数据层的数组对应位置里面,如图:

clipboard.png

数据就可以顺利保存了。

至于验证哈哈 见仁见智了,反正已经有数据了~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏