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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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 = /^1d{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
}
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>