微信提示在客戶端提交驗證 微信小程式之表單驗證

2021-10-12 13:39:35 字數 4660 閱讀 3150

1 /**2 * 表單驗證3 *4 * @param rules 驗證欄位的規則5 * @param messages 驗證欄位的提示資訊6 *7 */

8 class wxvalidate , messages ={}) ,12 rules,13 messages,14 })15 this.__init()16 }17

18 /**19 * __init20 */

21 __init() 26

27 /**28 * 初始化資料29 */

30 __initdata() 32 this.errorlist =33 }34

35 /**36 * 初始化預設提示資訊37 */

38 __initdefaults() 相同。'),51 contains: this.formattpl('輸入值必須包含 。'),52 minlength: this.formattpl('最少要輸入 個字元。'),53 maxlength: this.formattpl('最多可以輸入 個字元。'),54 rangelength: this.formattpl('請輸入長度在 到 之間的字元。'),55 min: this.formattpl('請輸入不小於 的數值。'),56 max: this.formattpl('請輸入不大於 的數值。'),57 range: this.formattpl('請輸入範圍在 到 之間的數值。'),58 }59 }60 }61

62 /**63 * 初始化預設驗證方法64 */

65 __initmethods() else if (typeof value === 'number') else if (typeof value === 'boolean') 79

80 return value.length > 0

81 },82 /**83 * 驗證電子郵箱格式84 */

85 email(value) ~-]+@[a-za-z0-9](?:[a-za-z0-9-][a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-][a-za-z0-9])?)*$/.test(value)87 },88 /**89 * 驗證手機格式90 */

91 tel(value) $/.test(value)93 },94 /**95 * 驗證url格式96 */

97 url(value) ))(?!(?:169\.254|192\.168)(?:\.\d))(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d))(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d|2[0-4]\d|25[0-5]))(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff])).?)(?::\d)?(?:[/?#]\s*)?$/i.test(value)

99 },100 /**101 * 驗證日期格式102 */

103 date(value) ,106 /**107 * 驗證iso型別的日期格式108 */

109 dateiso(value) [\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)111 },112 /**113 * 驗證十進位制數字114 */

115 number(value) (?:,\d)+)?(?:\.\d+)?$/.test(value)117 },118 /**119 * 驗證整數120 */

121 digits(value) ,124 /**125 * 驗證身份證號碼126 */

127 idcard(value) [1-9]\d((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d([0-9]|x)$/.test(value)129 },130 /**131 * 驗證兩個輸入框的內容是否相同132 */

133 equalto(value, param) ,136 /**137 * 驗證是否包含某個值138 */

139 contains(value, param) ,142 /**143 * 驗證最小長度144 */

145 minlength(value, param) ,148 /**149 * 驗證最大長度150 */

151 maxlength(value, param) ,154 /**155 * 驗證乙個長度範圍[min, max]156 */

157 rangelength(value, param) ,160 /**161 * 驗證最小值162 */

163 min(value, param) ,166 /**167 * 驗證最大值168 */

169 max(value, param) ,172 /**173 * 驗證乙個值範圍[min, max]174 */

175 range(value, param) ,178 }179 }180

181 /**182 * 新增自定義驗證方法183 * @param name 方法名184 * @param method 函式體,接收兩個引數(value, param),value表示元素的值,param表示引數185 * @param message 提示資訊186 */

187 addmethod(name, method, message) 191

192 /**193 * 判斷驗證方法是否存在194 */

195 isvalidmethod(value) 201 }202 return methods.indexof(value) !== -1

203 }204

205 /**206 * 格式化提示資訊模板207 */

208 formattpl(source, params) 250 returnparam251 }252

253 /**254 * 判斷輸入值是否為空255 */

256 optional(value) 259

260 /**261 * 獲取自定義欄位的提示資訊262 * @param param 欄位名263 * @param rule 規則264 */

265 custommessage(param, rule) 270

271 /**272 * 獲取某個指定欄位的提示資訊273 * @param param 欄位名274 * @param rule 規則275 */

276 defaultmessage(param, rule) .`282 } else if (type === 'function') 285

286 returnmessage287 }288

289 /**290 * 快取錯誤資訊291 * @param param 欄位名292 * @param rule 規則293 * @param value 元素的值294 */

295 formattplandadd(param, rule, value) )303 }304

305 /**306 * 驗證某個指定欄位的規則307 * @param param 欄位名308 * @param rules 規則309 * @param data 需要驗證的資料物件310 */

311 checkparam(param, rules, data) 330

331 //呼叫驗證方法

332 const result = this.methods[method](value, rule.parameters)333

334 //若result返回值為dependency-mismatch,則說明該字段的值為空或非必填字段

335 if (result === 'dependency-mismatch') 338

339 this.setvalue(param, method, result, value)340

341 //判斷是否通過驗證,否則快取錯誤資訊,跳出迴圈

342 if (!result) 346 }347 }348 }349

350 /**351 * 設定欄位的預設驗證值352 * @param param 欄位名353 */

354 setview(param) ,360 $success: {},361 $viewvalue: ``,362 }363 }364

365 /**366 * 設定欄位的驗證值367 * @param param 欄位名368 * @param method 欄位的方法369 * @param result 是否通過驗證370 * @param value 欄位的值371 */

372 setvalue(param, method, result, value) 380

381 /**382 * 驗證所有欄位的規則,返回驗證是否通過383 * @param data 需要驗證資料物件384 */

385 checkform(data) 392

393 return this.valid()394 }395

396 /**397 * 返回驗證是否通過398 */

399 valid() 402

403 /**404 * 返回錯誤資訊的個數405 */

406 size() 409

410 /**411 * 返回所有錯誤資訊412 */

413 validationerrors() 416 }417

418 export default wxvalidate

微信小程式製作商城 客戶端

login function header success function res else that.setdata fail function res that.setdata 10 開啟index.js檔案,為按鈕新增getuserinfo單擊事件,新增如下 getuserinfo func...

微信小程式 treehole,客戶端 服務端

sitemaplocation sitemap.json 本程式執行過程 先load 如果沒有賬號則需要註冊enroll,有的話直接登入login。之後在打卡廣場square,廣場顯示了所有人的打卡資訊。可以跳轉至mine頁面,我的頁面中顯示了使用者本人的打卡資訊。此時都可以選擇commit來發表自...

Android客戶端整合微信支付

整合流程 implementation com.tencent.mm.opensdk wechat sdk android without mta 2 伺服器端將需要的資訊配置齊全 3 在專案中建立weapi資料夾,在該資料夾下建立wxpaywntryactivity,需要注意 在androidma...