微信小程式表單輸入驗證(手機號、郵箱驗證、輸入非空)
阿新 • • 發佈:2018-12-18
wxml:
<form bindsubmit='formSubmit'> <view class='form'> <text class='label'>姓名<text class='red'>(必填)</text></text> <input class='int' name="name"></input> <text class='label'>手機<text class='red'>(必填)</text></text> <input class='int'name="phone" type="number" maxlength="11" bindinput="inputPhoneNum"></input> <text class='label'>郵箱<text class='red'>(必填)</text></text> <input class='int' name="email" bindchange="inputemail" ></input> <text class='label' >單位<text class='red'>(必填)</text></text> <input class='int' name="company" ></input> <text class='label' >職務<text class='red'>(必填)</text></text> <input class='int' name="job"></input> </view> <button class='submit' formType="submit" type="primary" >提交</button> </form>
注意: 手機號為輸入11個數字觸發事件。 郵箱為失去焦點觸發事件。 正則表示式/ /,格式注意
js:
Page({
/**
* 頁面的初始資料
*/
data: {
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
proList: null,
name:"",
phone:"",
email:"",
company:"",
job:"",
vip:""
},
// 判定輸入為非空字元
formSubmit: function (e) {
var name = e.detail.value.name;
var phone = e.detail.value.phone;
// mobile
var email = e.detail.value.email;
var company = e.detail.value.mobile;
var job = e.detail.value.job;
var vip = e.detail.value.vip;
if (name==""||phone==""||email==""||company==""||job==""||vip==""){
wx.showModal({
title: '提示',
content: '請輸入完整資訊!',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
}
}
})
} else{
console.log(e.detail.value)
// detail
}
},
loginBtnClick: function () {
if (this.data.name.length == 0 || this.data.phone.length == 0) {
this.setData({
infoMess: '溫馨提示:使用者名稱和密碼不能為空!',
})
} else {
this.setData({
infoMess: '',
name: '使用者名稱:' + this.data.userN,
phone: '密碼:' + this.data.passW
})
}
},
// 手機號部分
inputPhoneNum: function (e) {
let phoneNumber = e.detail.value
if (phoneNumber.length === 11) {
let checkedNum = this.checkPhoneNum(phoneNumber)
}
},
checkPhoneNum: function (phoneNumber) {
let str = /^1\d{10}$/
if (str.test(phoneNumber)) {
return true
} else {
wx.showToast({
title: '手機號不正確',
image: './../../../../images/fail.png'
})
return false
}
},
// 郵箱驗證部分
inputemail: function (e) {
let email = e.detail.value
let checkedNum = this.checkEmail(email)
},
checkEmail: function (email) {
let str = /^[a-zA-Z0-9_.-] [email protected][a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
if (str.test(email)) {
return true
} else {
wx.showToast({
title: '請填寫正確的郵箱號',
image: './../../../../images/fail.png'
})
return false
}
}
})