微信小程序自定义实现form表单

概要

在使用微信小程序vant组件库时，发现没有from组件，在填写表单类验证的时候非常麻烦，那么如何简易实现一个form表单

整体架构流程

主要技术：微信小程序、vant、html、js

实现流程

使用van-field组件自定义实现表单结构,通过formData绑定整体表单数据，error绑定错误信息，setValue实现双向数据绑定

<van-cell-group>
  <van-field
    value="{{ formData.name }}"
    label="姓名"
    placeholder="请输入姓名"
    border="{{ true }}"
    data-field="name"
    error-message="{{error.name}}"
    bind:input="setValue"
  />
  <van-field
    value="{{ formData.age }}"
    label="年龄"
    placeholder="请输入年龄"
    border="{{ true }}"
    type="number"
    data-field="age"
    error-message="{{error.age}}"
    bind:input="setValue"
    />
  <van-field
    value="{{ formData.phone }}"
    label="手机号"
    placeholder="请输入手机号"
    border="{{ true }}"
    type="number"
    data-field="phone"
    error-message="{{error.phone}}"
    bind:input="setValue"
  />
  <van-field
    value="{{ formData.desc }}"
    label="留言"
    placeholder="请输入留言"
    border="{{ true }}"
    type="textarea"
    autosize="{{true}}"
    data-field="desc"
    error-message="{{error.desc}}"
    bind:input="setValue"
  />
  <van-field
    value="{{ formData.desc }}"
    label="自定义表单"
    placeholder="请输入留言"
    border="{{ true }}"
    type="textarea"
    autosize="{{true}}"
    data-field="desc"
    error-message="123"
    bind:input="setValue"
  >
   <view slot="input">123</view>
  </van-field>
  <van-field
    value="{{ formData.sms }}"
    center
    clearable
    label="短信验证码"
    placeholder="请输入短信验证码"
    border="{{ false }}"
    use-button-slot
    data-field="sms"
    error-message="{{error.sms}}"
    bind:input="setValue"
  >
    <van-button slot="button" size="small" type="primary">
      发送验证码
    </van-button>
  </van-field>
  <van-button type="primary" round block bind:click="submitForm">提交</van-button>
</van-cell-group>
<!-- <my-form title="123"></my-form> -->

数据data结构如下，rules自定义验证规则

data: {
    formData: {
      name: '',
      age: '',
      phone: '',
      sms: '',
      desc: ''
    },
    rules: {
      name: [
        {
          required: true,
          message: '请输入姓名',
          triiger: 'change'
        }
      ],
      phone: [
        {
          required: true,
          message: '请输入手机号'
        },
        {
          validator: validatePhone,
          message: '手机号格式不正确'
        }
      ]
    },
    error: {
      name: '',
      age: '',
      phone: '',
      desc: '',
      sms: ''
    }
  },

自定义验证方法如下，通过循环整体表单的key，再去查找是否有验证规则，在循环规则去进行相关验证，验证失败把验证规则的错误信息添加到error中，反之清楚改验证字段错误信息

validateForm(validatorKeys) {
    const keys = validatorKeys || Object.keys(this.data.formData)
    keys.forEach(key => {
      const rule = this.data.rules[key]
      if(rule) {
        const value = this.data.formData[key]
        for(let i=0;i<rule.length;i++) {
          const ruleItem = rule[i]
          if(ruleItem.required) {
            this.setData({
              [`error.${key}`]: value.length > 0 ? '' : ruleItem.message
            })
            if(!value) {
              break
            }
          } else if(ruleItem.validator) {
              const flag = ruleItem.validator(value)
              this.setData({
                [`error.${key}`]: flag ? '' : ruleItem.message
              })
              if(!flag) {
                break
              }
          }
        }
      }
    })
  },

验证触发时机，已增加change为例，在触发值改变的时候去判断该字段是否有change验证，有就触发自定义验证规则，具体功能可在详细添加

setValue(e) {
    // console.log(e)
    const value = e.detail
    const field = e.currentTarget.dataset.field
    this.setData({
      [`formData.${field}`]: value
    })
    const rule = this.data.rules[field]
    if(rule) {
      const flag = rule.some(item => item.triiger === 'change')
      flag && this.validateForm([field])
    }
  },

效果图

小结

可以把相应功能封装为一个组件，然后形成复用，这样就跟平常使用一些组件库的form表单差不多一致。菜鸟一枚，感谢观看！