• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

弹出的形式对于用户来说,总是不太友好的

可能会出现层级问题(只需要设置一下提示的层级即可)

 

 

 

 

 

 

 

 

 

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 }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序表单验证发布时间:2022-07-18
下一篇:
设计模式--使用策略模式进行表单验证(微信小程序)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap