微信小程序 - 表单验证插件WxValidate使用
Github地址：WxValidate
1. 拷贝至util目录
2.项目引入
3.查看wxml匹配规则，通过name
4.在js配置规则
1 import WxValidate from '../../../utils/WxValidate'; 2 3 Page({ 4 5 /* * 6 * 页面的初始数据 7 */ 8 data: {}, 9 10 onLoad: function (options) { 11 12 /* * 13 * 4-1(先初始化表单) 14 */ 15 this .initValidate(); 16 }, 17 18 19 20 showModal(error) { 21 wx.showModal({ 22 content: error.msg, 23 showCancel: false , 24 }) 25 }, 26 27 28 submitForm(e) { 29 /* * 30 * 4-3(表单提交校验) 31 */ 32 const params = e.detail.value 33 if (!this .WxValidate.checkForm(params)) { 34 const error = this.WxValidate.errorList[0] 35 this .showModal(error) 36 return false 37 } 38 /* * 39 * 这里添写验证成功以后的逻辑 40 * 41 */ 42 // 验证通过以后-> 43 this .submitInfo(params); 44 }, 45 46 /* * 47 * 表单-提交 48 */ 49 submitInfo(params) { 50 // form提交 51 let form = params; 52 console.log('将要提交的表单信息：', form); 53 54 wx.showToast({ 55 title: '提交成功！！！！', 56 }) 57 }, 58 59 /* * 60 * 表单-验证字段 61 */ 62 initValidate() { 63 64 /* * 65 * 4-2(配置规则) 66 */ 67 const rules = { 68 name: { 69 required: true , 70 rangelength: [2, 4] 71 }, 72 idcard: { 73 required: true , 74 idcard: true , 75 }, 76 tel: { 77 required: true , 78 tel: true , 79 }, 80 // 配置false可关闭验证 81 regcode: { 82 required: false , 83 minlength: 6 84 }, 85 assistance: { 86 required: true , 87 assistance: true , 88 }, 89 } 90 // 验证字段的提示信息，若不传则调用默认的信息 91 const messages = { 92 name: { 93 required: '请输入姓名', 94 rangelength: '请输入2~4个汉字个汉字' 95 }, 96 tel: { 97 required: '请输入11位手机号码', 98 tel: '请输入正确的手机号码', 99 }, 100 idcard: { 101 required: '请输入身份证号码', 102 idcard: '请输入正确的身份证号码', 103 }, 104 regcode: { 105 required: '请输入验证码', 106 minlength: '请输入正确的验证码' 107 }, 108 assistance: { 109 required: '请勾选 《顺风男服务协议》' 110 }, 111 } 112 // 创建实例对象 113 this.WxValidate = new WxValidate(rules, messages) 114 /* * 115 * 也可以自定义验证规则 116 */ 117 this.WxValidate.addMethod('assistance', (value, param) => { 118 return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2) 119 }, '请勾选 《顺风男服务协议》') 120 } 121 });
5.wxml
1 < form bindsubmit ='submitForm' > 2 < view class ="container" > 3 < view class ='container-info' > 4 < view class ="man-form-info" > 5 < view class ='name' > 姓名 6 < input placeholder ='请输入姓名' name ="name" ></ input > 7 </ view > 8 < view class ='idcard' > 9 身份证号码 10 < input maxlength ='18' placeholder ='请输入身份证号码' type ='idcard' name ="idcard" ></ input > 11 </ view > 12 13 < view class ='phone' > 14 手机号码 15 < input maxlength ='11' placeholder ='请输入手机号码' type ='number' bindinput ="phoneValue" name ="tel" ></ input > 16 </ view > 17 </ view > 18 </ view > 19 20 < view class ='read-man-pact' > 21 < checkbox-group name ="assistance" > 22 < checkbox ></ checkbox > 23 < navigator class ='pact' >阅读《顺风男服务协议》</ navigator > 24 </ checkbox-group > 25 </ view > 26 27 < view class ='submit-form-info' > 28 < button form-type ='submit' >提交</ button > 29 </ view > 30 31 </ view > 32 </ form >
wxss
1 page { 2 font-size: 30rpx; 3 } 4 5 input:hover { 6 border-bottom: 2px solid #ddd; 7 } 8 9 button:active { 10 opacity: 0.7; 11 } 12 13 .container-info { 14 padding: 5%; 15 } 16 17 .man-form-info { 18 display: flex; 19 flex-wrap: wrap; 20 justify-content: center; 21 } 22 23 .man-form-info .name, .man-form-info .idcard, .man-form-info .phone, 24 .man-form-info .regcode { 25 display: flex; 26 width: 100%; 27 flex-wrap: wrap; 28 margin-top: 2%; 29 } 30 31 .man-form-info input { 32 width: 100%; 33 border-bottom: 1px solid #ddd; 34 } 35 36 .regcode { 37 position: relative; 38 } 39 40 .regcode button { 41 border-radius: 10rpx; 42 background-color: #3879d9; 43 color: #fff; 44 height: 54rpx; 45 line-height: 54rpx; 46 font-size: 23rpx; 47 width: 300rpx; 48 margin-top: -2%; 49 } 50 51 .regcode input { 52 width: 100%; 53 } 54 55 .code { 56 position: relative; 57 width: 100%; 58 } 59 60 .code button { 61 position: absolute; 62 top: 72rpx; 63 right: 0; 64 } 65 66 .self-idcard-info { 67 margin-top: 15%; 68 display: flex; 69 flex-wrap: wrap; 70 justify-content: center; 71 width: 100%; 72 border: 1px dashed #ddd; 73 padding: 2%; 74 } 75 76 .f-center { 77 width: 100%; 78 display: flex; 79 justify-content: center; 80 } 81 82 .picture_list { 83 padding: 0 7%; 84 } 85 86 .add-image { 87 background-color: #ddd; 88 color: #fff; 89 } 90 91 .upload_progress { 92 width: 167rpx; 93 height: 164rpx; 94 } 95 96 .apply { 97 width: 96%; 98 display: flex; 99 justify-content: space-between; 100 align-items: center; 101 padding: 2%; 102 border-top: 2px solid #ddd; 103 border-bottom: 2px solid #ddd; 104 } 105 106 .apply-deposit { 107 font-weight: bold; 108 } 109 110 .apply-deposit-amount { 111 font-weight: bold; 112 color: #fdd20c; 113 } 114 115 .apply button { 116 margin: 0; 117 padding: 0; 118 width: 240rpx; 119 height: 60rpx; 120 line-height: 60rpx; 121 color: #fff; 122 background-color: #fdd20c; 123 } 124 125 .read-man-pact { 126 display: flex; 127 justify-content: center; 128 padding: 2%; 129 } 130 131 .read-man-pact checkbox-group { 132 display: flex; 133 align-items: center; 134 } 135 136 .pact { 137 border-bottom: 1px solid #ddd; 138 } 139 140 .submit-form-info { 141 display: flex; 142 justify-content: center; 143 } 144 145 .submit-form-info button { 146 background-color: #fdd000; 147 width: 80%; 148 margin: 3% 0; 149 }
效果图（拷贝上面的代码即可运行）
posted @ 2018-08-29 20:48 Sunsin 阅读(...) 评论(...) 编辑 收藏
刷新评论刷新页面返回顶部
Copyright © 2020 Sunsin
Powered by .NET Core on Kubernetes
GIF
PNG