您好,登錄后才能下訂單哦!
這篇文章主要講解了“微信小程序怎么實(shí)現(xiàn)表單驗證功能”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)表單驗證功能”吧!
Wxml
<form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="請?zhí)顚懩男彰?quot; 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="請?zhí)顚懩氖謾C(jī)號" 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: '請?zhí)顚懩男彰彰?#39;, }, mobile: { required: '請?zhí)顚懩氖謾C(jī)號', }, 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 () { } }) }
感謝各位的閱讀,以上就是“微信小程序怎么實(shí)現(xiàn)表單驗證功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對微信小程序怎么實(shí)現(xiàn)表單驗證功能這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。