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

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_.-]+@[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个数字触发事件。

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

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