微信小程序表單驗證功能完整實例
更新時間:2017年12月01日 08:53:16 作者:xiaochun365
這篇文章主要介紹了微信小程序表單驗證功能,結合完整實例形式分析了微信小程序完成表單驗證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序表單驗證功能。分享給大家供大家參考,具體如下:
Wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="請?zhí)顚懩男彰? 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號" 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í)顚懩男彰彰?,
},
mobile: {
required: '請?zhí)顚懩氖謾C號',
},
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 () {
}
})
}
WxValidate.js 文件點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
詳解JavaScript中的數(shù)組合并方法和對象合并方法
這篇文章主要介紹了JavaScript中的數(shù)組合并方法和對象合并方法,通過代碼的形式給大家介紹的非常詳細,需要的朋友可以參考下2018-05-05
微信小程序自定義toast實現(xiàn)方法詳解【附demo源碼下載】
這篇文章主要介紹了微信小程序自定義toast實現(xiàn)方法,簡單描述了微信小程序自帶toast使用方法,并結合實例形式分析了自定義toast的定義與使用方法,需要的朋友可以參考下2017-11-11
JavaScript 中獲取數(shù)組最后一個元素方法匯總
在JavaScript中,獲取數(shù)組最后一個元素的方法有很多種。今天我們就來匯總一下JavaScript獲取數(shù)組最后一個元素的幾種方法,需要的朋友可以參考下2023-02-02
解決layui上傳文件提示上傳異常,實際文件已經上傳成功的問題
今天小編就為大家分享一篇解決layui上傳文件提示上傳異常,實際文件已經上傳成功的問題。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08

