当前位置:   article > 正文

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

微信小程序 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> -->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

数据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: ''
    }
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

自定义验证方法如下,通过循环整体表单的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
              }
          }
        }
      }
    })
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

验证触发时机,已增加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])
    }
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

效果图

在这里插入图片描述

小结

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/335904
推荐阅读
  

闽ICP备14008679号