微信小程序表单验证（手机号、邮箱验证、输入非空）

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_.-]+@[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
 
}
 
}
 
})

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个数字触发事件。

邮箱为失去焦点触发事件。

正则表达式/  /，格式注意。