微信小程序表单验证功能-创新互联

小编给大家分享一下微信小程序表单验证功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10年积累的成都网站制作、成都做网站、外贸营销网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有巴里坤哈萨克免费网站建设让你可以放心的选择与我们合作。

Wxml

<form bindsubmit="formSubmit" bindreset="formReset">
 <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whoFocus=='name'?true:false}}" bindblur="nameBlurFocus" />
 <radio-group name="gender" bindchange="radioChange">
  <radio value="0" checked />女士
  <radio value="1" />先生
 </radio-group>
 <input name="mobile" class="{{whoClass=='mobile'?'placeholderClass':'inputClass'}}" type="number" maxlength="11" placeholder="请填写您的手机号" bindblur="mobileBlurFocus" focus="{{whoFocus=='mobile'?true:false}}" />
 <input name="company" class="{{whoClass=='company'?'placeholderClass':'inputClass'}}" placeholder="公司名称" type="text" confirm-type="next" focus="{{whoFocus=='company'?true:false}}" />
 <input name="client" class="{{whoClass=='client'?'placeholderClass':'inputClass'}}" placeholder="绑定客户" type="text" confirm-type="done" focus="{{whoFocus=='client'?true:false}}" />
 <button formType="submit">提交</button>
</form>
<loading hidden="{{submitHidden}}">
 正在提交...
</loading>

app.js

import wxValidate from 'utils/wxValidate'
App({
  wxValidate: (rules, messages) => new wxValidate(rules, messages)
})

news.js

var appInstance = getApp()
//表单验证初始化
onLoad: function () {
    this.WxValidate = appInstance.WxValidate(
      {
        name: {
          required: true,
          minlength: 2,
          maxlength: 10,
        },
        mobile: {
          required: true,
          tel: true,
        },
        company: {
          required: true,
          minlength: 2,
          maxlength: 100,
        },
        client: {
          required: true,
          minlength: 2,
          maxlength: 100,
        }
      }
      , {
        name: {
          required: '请填写您的姓名姓名',
        },
        mobile: {
          required: '请填写您的手机号',
        },
        company: {
          required: '请输入公司名称',
        },
        client: {
          required: '请输入绑定客户',
        }
      }
    )
  },
  //表单提交
   formSubmit: function (e) {
     //提交错误描述
    if (!this.WxValidate.checkForm(e)) {
      const error = this.WxValidate.errorList[0]
      // `${error.param} : ${error.msg} `
      wx.showToast({
        title: `${error.msg} `,
        image: '/pages/images/error.png',
        duration: 2000
      })
      return false
    }
    this.setData({ submitHidden: false })
    var that = this
    //提交
    wx.request({
      url: '',
      data: {
        Realname: e.detail.value.name,
        Gender: e.detail.value.gender,
        Mobile: e.detail.value.mobile,
        Company: e.detail.value.company,
        client: e.detail.value.client,
        Identity: appInstance.userState.identity
      },
      method: 'POST',
      success: function (requestRes) {
        that.setData({ submitHidden: true })
        appInstance.userState.status = 0
        wx.navigateBack({
          delta: 1
        })
      },
      fail: function () {
      },
      complete: function () {
      }
    })
  }

以上是“微信小程序表单验证功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站名称：微信小程序表单验证功能-创新互联
文章转载：https://www.cdcxhl.com/article10/dgopdo.html

成都网站建设公司_创新互联，为您提供网站内链、手机网站建设、外贸建站、建站公司、面包屑导航、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联