[微信小程序] 校验表单，滑动到不合格的具体表单项

一、具体需求

产品提出校验表单时，填写不符合校验规则的，表单项 label 高亮，页面滑动定位到该表单项

二、实现思路

在校验表单函数，除了wx.showToast()提示用户外，使用wx.pageScrollTo 将页面滚动到目标位置，该API支持选择器和滚动距离两种方式定位，官方文档点我

首先要在 input-field 给具体的 id，这个id 根据表单项的具体位置决定，这里写的是比如这里是上线时间 published_at未选，则滑动到这个位置

<view id="published_at">
  <input-field
    type="text"
    value="{{form.miniprogram_app_id}}"
    disabled="{{isExpired}}"
    label="AppID"
    bindinput="onInputChange"
    bindfocus="setTipsModelhidden"
    bindblur="onAppIdInputBlur"
    data-input-type="miniprogram_app_id"
    placeholder="请填写小程序AppID"
    label-class="{{error === 'miniprogram_app_id' ? 'error' : ''}}"
    showHelp="{{true}}"
    bindclickHelp="onClickHelp"
    input-class="appId-input-class"
  />
</view>

然后再根据错误信息改变label 的样式 ，将label 变红

 label-class="{{error === 'miniprogram_app_id' ? 'error' : ''}}"

wx.pageScrollTo({
  selector: `#baseInfo>>>#${err.message}`,
  duration: 500,
})

附上表单校验函数

validateForm() {
 const {form} = this.data
 const requiredFields = [
   'miniprogram_name',
   'miniprogram_logo',
   'miniprogram_app_id',
   'published_at',
   'cover_image',
   'intro',
   'miniprogram_image',
 ]
 try {
   requiredFields.forEach(item => {
     if (typeof form[item] === 'string') {
       if (form[item] === '' || (item === 'miniprogram_app_id' && !isAppID(form[item]))) {
         throw new Error(item)
       }
     } else if (form[item].length <= 0) {
       throw new Error(item)
     }
   })
   return true
 } catch (err) {
   wxUtils.showToast(FROM_VALIDATE_ERROR_TEXT_MAP[err.message])
   this.setData({error: err.message})
   if (err.message === 'miniprogram_name') {
     wx.pageScrollTo({
       scrollTop: 0,
       duration: 500,
     })
   } else {
     wx.pageScrollTo({
       selector: `#baseInfo>>>#${err.message}`,
       duration: 500,
     })
   }
   return false
 }
},