微信小程序，数据双向绑定？多个输入框，一个方法就够了！

最近在做微信小程序的开发，前端页面经常需要使用多个文本输入框进行交互，但微信小程序却不支持数据双向绑定。这就导致每一个输入框，都要写一个bind:change="onChange"函数进行赋值。有没有什么轻松的解决办法呢？

有办法！

就是利用以下两个原理：

1. wxml中的data-XXX元素可以在回调函数的e.target.dataset.XXX中访问。
2. 后端赋值的this.setData方法可以使用[var]: value方式以变量为key进行赋值。

所以，我们可以这样解决这个问题，假设这边我们有2个输入框，我们如何通过一个方法进行数据绑定：

WXML：

  <van-field
    value="{{ account }}"
    data-key="account"
    bind:change="onFieldChange"
    label="账号"
    placeholder="请输入账号"
    bind:blur = "onFieldBlur_validate"
    error-message="{{ account_error }}"
  />
  <van-field
    value="{{ passwd }}"
    data-key="passwd"
    bind:change="onFieldChange"
    type="password"
    label="密码"
    placeholder="请输入密码"
    bind:blur = "onFieldBlur_validate"
    error-message="{{ passwd_error }}"
  />

JS：

  // 输入框变化时更新数据
  onFieldChange(e){
    console.log(`赋值前：this.data:`,this.data);
    this.setData({
      [e.target.dataset.key]:e.detail
    });
    console.log(`赋值后：this.data:`,this.data);
    // console.log(`this.data.${e.target.dataset.key}:`,this.data[e.target.dataset.key]);
  },

通过这个样子，就是在输入框发生变化的时候，根据target.dataset.key的值，把这个输入框的detail（就是用户输入的内容）设置到this.data中。

相对的，你还可以扩张到其它地方，比如写一个数值合法性校验工具，然后再blur的时候，通过上述方法，进行校验。思路如下：

import myconfig from "../../utils/myconfig";
  // 离开输入时进行验证
  onFieldBlur_validate(e){
    this.setData({
      [e.target.dataset.key + "_error"]: myconfig.validateTools[e.target.dataset.key](e.detail.value)
    });
  },

下面是../../utils/myconfig

const validateTools = {
  account: account => {
    console.log('validate_account account:',account);
    if(account.length<6 || account.length>20){
      return "账号长度应大等于6，小于20"
    }
    if(/[^\w]+/.exec(account)){
      console.log(/[^\w]+/.exec(account));
      return '账号仅允许使用"a-zA-Z"和"_"下划线'
    }
    return ""
  },
  passwd: passwd => {
    console.log('validate_passwd passwd:',passwd);
    if(passwd.length<6 || passwd.length>20){
      return "密码长度应大等于6，小于20"
    }
    return ""
  },
  user_name: user_name => {
    console.log('validate_user_name user_name:',user_name);
    if(user_name.length<1 || user_name.length>10){
      return "用户名长度应大等于1，小于10"
    }
    if(/[^\w\u4e00-\u9fa5]+/.exec(user_name)){
      console.log(/[^\w\u4e00-\u9fa5]+/.exec(user_name));
      return '仅允许使用汉字、英文字母、数字、下划线。'
    }
    return ""
  },
}

module.exports = {
  validateTools:validateTools
}

我想应该对你有所帮助ba？哇哈哈