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

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

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

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

猜你喜欢

转载自blog.csdn.net/thea12138/article/details/80507133