微信小程序表單驗(yàn)證功能完整實(shí)例
本文實(shí)例講述了微信小程序表單驗(yàn)證功能。分享給大家供大家參考,具體如下:
Wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="請(qǐng)?zhí)顚?xiě)您的姓名" 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="請(qǐng)?zhí)顚?xiě)您的手機(jī)號(hào)" 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()
//表單驗(yàn)證初始化
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: '請(qǐng)?zhí)顚?xiě)您的姓名姓名',
},
mobile: {
required: '請(qǐng)?zhí)顚?xiě)您的手機(jī)號(hào)',
},
company: {
required: '請(qǐng)輸入公司名稱',
},
client: {
required: '請(qǐng)輸入綁定客戶',
}
}
)
},
//表單提交
formSubmit: function (e) {
//提交錯(cuò)誤描述
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 () {
}
})
}
WxValidate.js 文件點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
詳解JavaScript中的數(shù)組合并方法和對(duì)象合并方法
這篇文章主要介紹了JavaScript中的數(shù)組合并方法和對(duì)象合并方法,通過(guò)代碼的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05
JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式
這篇文章主要介紹了JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式,文章通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
微信小程序自定義toast實(shí)現(xiàn)方法詳解【附demo源碼下載】
這篇文章主要介紹了微信小程序自定義toast實(shí)現(xiàn)方法,簡(jiǎn)單描述了微信小程序自帶toast使用方法,并結(jié)合實(shí)例形式分析了自定義toast的定義與使用方法,需要的朋友可以參考下2017-11-11
只需一行代碼,輕松實(shí)現(xiàn)一個(gè)在線編輯器
在瀏覽器地址欄中輸入一行代碼:data:text/html, <html contenteditable> ,回車即可把瀏覽器變臨時(shí)編輯器(需要瀏覽器支持 HTML5 屬性 contenteditable)2013-11-11
JavaScript 中獲取數(shù)組最后一個(gè)元素方法匯總
在JavaScript中,獲取數(shù)組最后一個(gè)元素的方法有很多種。今天我們就來(lái)匯總一下JavaScript獲取數(shù)組最后一個(gè)元素的幾種方法,需要的朋友可以參考下2023-02-02
解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問(wèn)題
今天小編就為大家分享一篇解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問(wèn)題。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08

