弹出的形式对于用户来说，总是不太友好的
可能会出现层级问题（只需要设置一下提示的层级即可）
WxValidate内置规则
以下代码拷贝即可使用~
wxml
1 <form bindsubmit='submitCheckInfo'>
2
3 <!-- 提示警告! -->
4 <view class='wran-tips' style='{{displayWarn}}'> 5 <text>{{warnInfo}}</text> 6 </view>
7
8 <view class="container">
9 <view class='container-info'>
10 <view class="man-form-info">
11 <view class='name'>姓名 12 <input placeholder='请输入姓名' name="name"></input>
13 </view>
14 <view class='idcard'>
15 身份证号码 16 <input maxlength='18' placeholder='请输入身份证号码' type='idcard' name="idcard"></input>
17 </view>
18
19 <view class='phone'>
20 手机号码 21 <input maxlength='11' placeholder='请输入手机号码' type='number' bindinput="phoneInput" name="tel"></input>
22 </view>
23
24 </view>
25 </view>
26
27 <view class='read-man-pact'>
28 <checkbox-group name="assistance">
29 <checkbox></checkbox>
30 <navigator class='pact'>阅读《顺风男服务协议》</navigator>
31 </checkbox-group>
32 </view>
33
34
35 <view class='submit-form-info'>
36 <button form-type='submit'>提交</button>
37 </view>
38
39 </view>
40 </form>
js
1 import WxValidate from '../../../utils/WxValidate'; 2
3 Page({ 4
5 /** 6 * 页面的初始数据 7 */
8 data: { 9 // 初始化警告
10 displayWarn: 'display:none'
11 }, 12
13 /** 14 * 生命周期函数--监听页面加载 15 */
16 onLoad: function(options) { 17 // 校验规则 -rules
18 this.initValidate(); 19 }, 20
21 /** 22 * 表单验证->(可自定义验证形式) 23 */
24 showWarnInfo(error) { 25 // 当前page是this对象
26 let page = this; 27 // 延时时间等待
28 let delayTime = 1; 29 // 延时等待毫秒,现设置为1000
30 let delayMillsecond = 1000; 31 // 调用显示警告函数
32 showWran(page, error, delayTime, delayMillsecond); 33 }, 34
35 /** 36 * 表单-提交前的(校验) 37 */
38 submitCheckInfo(e) { 39 const params = e.detail.value 40 console.log(params) 41 // 传入表单数据，调用验证方法
42 if (!this.WxValidate.checkForm(params)) { 43 const error = this.WxValidate.errorList[0] 44 this.showWarnInfo(error) 45 return false
46 } 47 // 验证通过以后
48 this.submitForm(params); 49 }, 50
51 /** 52 * 表单-提交(到后端) 53 */
54 submitForm(params) { 55 console.log(params); 56
57 wx.showToast({ 58 title: '提交吧~Q!', 59 }) 60 }, 61
62 /** 63 * 表单-验证字段 64 */
65 initValidate() { 66 const rules = { 67 name: { 68 required: true, 69 rangelength: [2, 4] 70 }, 71 idcard: { 72 required: true, 73 idcard: true, 74 }, 75 tel: { 76 required: true, 77 tel: true, 78 }, 79 regcode: { 80 required: false, 81 minlength: 6
82 }, 83 assistance: { 84 required: true, 85 assistance: true, 86 }, 87 } 88 // 验证字段的提示信息，若不传则调用默认的信息
89 const messages = { 90 name: { 91 required: '请输入姓名', 92 rangelength: '请输入2~4个汉字个汉字'
93 }, 94 tel: { 95 required: '请输入11位手机号码', 96 tel: '请输入正确的手机号码', 97 }, 98 idcard: { 99 required: '请输入身份证号码', 100 idcard: '请输入正确的身份证号码', 101 }, 102 regcode: { 103 required: '请输入验证码', 104 minlength: '请输入正确的验证码'
105 }, 106 assistance: { 107 required: '请勾选 《顺风男服务协议》'
108 }, 109 } 110 // 创建实例对象
111 this.WxValidate = new WxValidate(rules, messages) 112 // 自定义验证规则
113 this.WxValidate.addMethod('assistance', (value, param) => { 114 return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2) 115 }, '请勾选 《顺风男服务协议》') 116 } 117 }) 118
119
120 /** 121 * 可加入工具集-减少代码量 122 */
123 function showWran(page, error, delayTime, delayMillsecond) { 124 let timesRun = 0; 125 let interval = setInterval(function() { 126 timesRun += delayTime; 127 if (timesRun === delayTime) { 128 clearInterval(interval); 129 } 130 page.setData({ 131 warnInfo: error.msg, 132 displayWarn: 'display:none'
133 }); 134 }, delayMillsecond); 135 page.setData({ 136 warnInfo: error.msg, 137 displayWarn: 'display:block'
138 }); 139 }
wxss
1 @import "../../template/up-pic.wxss"; 2
3 page {
4 font-size: 30rpx;
5 }
6
7 button:active {
8 opacity: 0.7;
9 }
10
11 .wran-tips {
12 text-align: center;
13 color: #fff;
14 padding: 2%;
15 width: 100%;
16 background-color: #f00;
17 display: flex;
18 justify-content: center;
19 position: fixed;
20 top: 0;
21 }
22
23 .container-info {
24 padding: 5%;
25 /* margin-top: 4%; */
26 }
27
28 .man-form-info {
29 display: flex;
30 flex-wrap: wrap;
31 justify-content: center;
32 }
33
34 .man-form-info .name, .man-form-info .idcard, .man-form-info .phone, 35 .man-form-info .regcode {
36 display: flex;
37 width: 100%;
38 flex-wrap: wrap;
39 margin-top: 2%;
40 }
41
42 .man-form-info input {
43 width: 100%;
44 border-bottom: 1px solid #ddd;
45 }
46
47 .regcode {
48 position: relative;
49 }
50
51 .regcode button {
52 border-radius: 10rpx;
53 background-color: #3879d9;
54 color: #fff;
55 height: 54rpx;
56 line-height: 54rpx;
57 font-size: 23rpx;
58 width: 300rpx;
59 margin-top: -2%;
60 }
61
62 .regcode input {
63 /* width: 50%; */
64 width: 100%;
65 }
66
67 .code {
68 position: relative;
69 width: 100%;
70 }
71
72 .code button {
73 position: absolute;
74 top: 72rpx;
75 right: 0;
76 }
77
78 input:hover {
79 border-bottom: 2px solid #ddd;
80 }
81
82 .self-idcard-info {
83 margin-top: 15%;
84 display: flex;
85 flex-wrap: wrap;
86 justify-content: center;
87 width: 100%;
88 border: 1px dashed #ddd;
89 padding: 2%;
90 }
91
92 .f-center {
93 display: flex;
94 justify-content: center;
95 width: 100%;
96 }
97
98 .picture_list {
99 /* justify-content: center; */
100 padding: 0 7%;
101 }
102
103 .add-image {
104 background-color: #ddd;
105 color: #fff;
106 }
107
108 .upload_progress {
109 width: 167rpx;
110 height: 164rpx;
111 }
112
113 .apply {
114 width: 96%;
115 display: flex;
116 justify-content: space-between;
117 align-items: center;
118 padding: 2%;
119 border-top: 2px solid #ddd;
120 border-bottom: 2px solid #ddd;
121 }
122
123 .apply-deposit {
124 font-weight: bold;
125 }
126
127 .apply-deposit-amount {
128 font-weight: bold;
129 color: #fdd20c;
130 }
131
132 .apply button {
133 margin: 0;
134 padding: 0;
135 width: 240rpx;
136 height: 60rpx;
137 line-height: 60rpx;
138 color: #fff;
139 background-color: #fdd20c;
140 }
141
142 .read-man-pact {
143 display: flex;
144 justify-content: center;
145 padding: 2%;
146 }
147
148 .read-man-pact checkbox-group {
149 display: flex;
150 align-items: center;
151 }
152
153 .pact {
154 border-bottom: 1px solid #ddd;
155 }
156
157 .submit-form-info {
158 display: flex;
159 justify-content: center;
160 }
161
162 .submit-form-info button {
163 background-color: #fdd000;
164 width: 80%;
165 margin: 3% 0;
166 }