【微信小程序】表单校验_微信小程序表单验证

小程序开发过程中，很多地方要做表单校验，而小程序并不能像vue那样有专门的校验函数，只能自己手写做出类似的效果。

以修改密码为例，需要校验以下三个输入框：

原理：
利用输入框的bindblur方法，根据校验的条件判断来控制错误信息的显示隐藏
实现代码：

<view>
  <span class="label">旧密码</span>
  <input type='input' placeholder="请输入旧密码" data-inputid="oldPwd" model:value="{{oldPassword}}" bindblur="onBlur" />
  <view class="{{submitMsg.oldPwd ==='' ? 'vhidden' : 'vshow'}} the-msg">{{submitMsg.oldPwd}}</view>
</view>
<view>
  <span class="label">新密码</span>
  <input type='input' placeholder="请输入新密码" data-inputid="newPwd" model:value="{{newPassword}}" bindblur="onBlur" />
  <view class="{{submitMsg.newPwd ==='' ? 'vhidden' : 'vshow'}} the-msg">{{submitMsg.newPwd}}</view>
</view>
<view>
  <span class="label">确认密码</span>
  <input type='input' placeholder="请再次输入新密码" data-inputid="quePwd" model:value="{{quePassword}}" bindblur="onBlur" />
  <view class="{{submitMsg.quePwd ==='' ? 'vhidden' : 'vshow'}} the-msg">{{submitMsg.quePwd}}</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let pwdReg = /^[0-9a-z_.@]{6,16}$/
data: {
  oldPassword: '',
  newPassword: '',
  quePassword: '',
  submitMsg: {
     oldPwd: '',
     newPwd: '',
     quePwd: ''
   }
},
onBlur(e) {
  switch (e.currentTarget.dataset.inputid) {
    case 'oldPwd':
      if (this.data.oldPassword === '') {
        this.setData({
          ["submitMsg.oldPwd"]: '旧密码不可为空'
        })
      } else if (!pwdReg.test(this.data.oldPassword)) {
        this.setData({
          ["submitMsg.oldPwd"]: '旧密码格式不正确'
        })
      } else { 
        this.setData({
          ["submitMsg.oldPwd"]: ''
        })
      }
      break;
    case 'newPwd':
      if (this.data.newPassword === '') {
        this.setData({
          ["submitMsg.newPwd"]: '新密码不可为空'
        })
      } else if (!pwdReg.test(this.data.newPassword)) {
        this.setData({
          ["submitMsg.newPwd"]: '新密码格式不正确'
        })
      } else if (this.data.quePassword && (this.data.newPassword !== this.data.quePassword)) {
        this.setData({
          ["submitMsg.newPwd"]: '两次输入的密码不一致，请重试'
        })
      } else {
        this.setData({
          ["submitMsg.newPwd"]: ''
        })
      }
      break;
    case 'quePwd':
      if (this.data.quePassword === '') {
        this.setData({
          ["submitMsg.quePwd"]: '确认密码不可为空'
        })
      } else if (!pwdReg.test(this.data.quePassword)) {
        this.setData({
          ["submitMsg.quePwd"]: '确认密码格式不正确'
        })
      } else if (this.data.newPassword !== this.data.quePassword) {
        this.setData({
          ["submitMsg.quePwd"]: '两次输入的密码不一致，请重试'
        })
      } else {
        this.setData({
          ["submitMsg.quePwd"]: ''
        })
      }
      break;
    default:
      break;
  }
},
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

.vshow {
  display: block !important;
}
.vhidden {
  display: none !important;
}
1
2
3
4
5
6