校友會小程式開發筆記十五： 小程式前端資料校驗體系的設計與實現
阿新 • • 發佈：2021-01-07
微信小程式前端開發框架沒有自帶的驗證功能，雖然有表單的資料控制屬性，但是略顯簡陋，且不成體系，尤其是結合後端很彆扭，因此小女子開發校友錄小程式的表單驗證時候一般有兩種方法，一是自己裸寫驗證規則，但是需要比較紮實的正則表示式基礎，一種是自己封裝Validate外掛進行表單驗證，基於以上原因，小女子自己封裝了前端資料校驗規則一套，並且與雲開發後端資料校驗的寫法和規則一致（雲開發後端資料校驗體系參見上一篇筆記：））
校友錄小程式集中校驗路由
function check(data, rules, that) { let returnData = {}; for (let k inrules) { let arr = rules[k].split('|'); let desc = ''; // 校友錄小程式資料項說明 for (let i = 0; i < arr.length; i++) { if (arr[i].indexOf('name=') > -1) { desc = arr[i].replace('name=', ''); break; } }// 校驗 let formName = arr[0]; let val = data[formName]; if (val === undefined) val = ''; if (!Array.isArray(val)) val = String(val).trim(); // 前後去校友錄小程式空格 returnData[k] = val; for (let i = 1; i < arr.length; i++) { let result = ''; let rules = arr[i].split(':'); // 校友錄小程式空不校驗 if (rules[0] != 'required' && val == '') continue; switch (rules[0]) { case 'required': result = checkRequired(val, desc); break; case 'array': result = checkArray(val, desc); break; case 'date': result = checkDate(val, desc); break; case 'time': result = checkTime(val, desc); break; case 'datetime': result = checkDatimeTime(val, desc); break; case 'min': result = checkMin(val, Number(rules[1]), desc); break; case 'max': result = checkMax(val, Number(rules[1]), desc); break; case 'len': result = checkLen(val, Number(rules[1]), desc); break; case 'in': result = checkIn(val, rules[1], desc); break; case 'email': result = checkEmail(val, desc); break; case 'mobile': result = checkMobile(val, desc); break; case 'int': result = checkInt(val, desc); break; case 'id': result = checkId(val, desc); break; case 'letter': result = checkLetter(val, desc); break; case 'letter_num': result = checkLetterNum(val, desc); break; } if (result) { wx.showModal({ title: '溫馨提示', content: result, showCancel: false, success(res) { // 校友錄小程式自動聚焦 if (that) that.setData({ [formName + 'Focus']: true }); } }); return false; } else { if (that) { // 刪除校友錄小程式原有的自動聚焦 if (helper.isDefined(that.data[formName + 'Focus'])) { that.setData({ //TODO delete? [formName + 'Focus']: false }); } } } } } return returnData; }
校友錄小程式分項資料校驗
function checkRequired(value, desc) { if (value == '') return desc + '不能為空'; } /** * 校驗校友錄小程式字元長度 * @param {*} value * @param {*} min * @param {*} max */ function isCheckLen(value, min, max) { //TODO 數字怎麼處理 if (!helper.isDefined(value)) return false; if (typeof (value) != 'string') return false; if (value.length < min || value.length > max) return false; return true; } /** * 校驗校友錄小程式數字大小 * @param {*} value * @param {*} min * @param {*} max */ function isCheckM(value, min, max) { if (!helper.isDefined(value)) return false; if (typeof (value) == 'string' && /^[0-9]+$/.test(value)) value = Number(value); if (typeof (value) != 'number') return false; if (value < min || value > max) return false; return true; } function checkMin(value, len, desc) { if (value.length < len) return desc + '不能小於' + len + '位'; }; function checkMax(value, len, desc) { if (value.length > len) return desc + '不能大於' + len + '位'; }; function checkLen(value, len, desc) { if (value.length != len) return desc + '必須為' + len + '位'; }; function checkMobile(value, desc) { if (value == '') return ''; if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) return desc + '格式不正確'; } function checkInt(value, desc) { if (value == '') return ''; if (!/^[0-9]+$/.test(value)) return desc + '必須為數字'; } function checkLetter(value, desc) { if (value == '') return; if (!/^[A-Za-z]+$/.test(value)) return desc + '必須為字母'; } function checkLetterNum(value, desc) { if (value == '') return; if (!/^\w+$/.test(value)) return desc + '必須為字母，數字和下劃線'; } function checkId(value, desc, min = 1, max = 32) { if (value == '') return; if (value.length < min || value.length > max) return false; if (!/^\w+$/.test(value)) return desc + '必須為ID格式'; } function isCheckId(value, min = 1, max = 32) { if (!helper.isDefined(value)) return false; if (typeof (value) != 'string') return false; if (value.length < min || value.length > max) return false; if (!/^\w+$/.test(value)) return false; return true; } // 校友錄小程式郵箱 function checkEmail(value, desc) { if (value == '') return; let hint = desc + '必須為郵箱格式'; let reg = /^[A-Za-z0-9+]+[A-Za-z0-9\.\_\-+]*@([A-Za-z0-9\-]+\.)+[A-Za-z0-9]+$/; if (!reg.test(value)) return hint; } // 校友錄小程式短日期，形如 (2008-07-22) function checkDate(value, desc) { if (value == '') return; let hint = '請選擇' + desc; if (value.length != 10) return hint; let r = value.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if (r == null) return hint; let d = new Date(r[1], r[3] - 1, r[4]); let chk = d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]; if (!chk) return hint; } // 校友錄小程式短時間，形如 (13:04:06) function checkTime(value, desc) { if (value == '') return; let hint = desc + '必須為時間格式'; if (value.length != 8) return hint; let a = value.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/); if (a == null) return hint; if (a[1] > 24 || a[3] > 60 || a[4] > 60) return hint; } // 長時間，形如 (2008-07-22 13:04:06) function checkDatimeTime(value, desc) { if (value == '') return; let hint = desc + '必須為完整時間格式'; if (value.length != 19) return hint; var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; var r = value.match(reg); if (r == null) return hint; var d = new Date(r[1], r[3] - 1, r[4], r[5], r[6], r[7]); let chk = d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4] && d.getHours() == r[5] && d.getMinutes() == r[6] && d.getSeconds() == r[7]; if (!chk) return hint; } function checkArray(value, desc) { if (value == '') return; if (!Array.isArray(value)) return desc + '填寫錯誤'; } function checkIn(value, ref, desc) { if (value == '') return; let arr = ref.split(','); if (!arr.includes(value) && !arr.includes(value + '')) return desc + '填寫錯誤'; } /** * 檢查校友錄小程式列舉型別 * @param {*} value * @param {*} ref 格式 1,2,3 */ function isCheckIn(value, ref) { if (!helper.isDefined(value)) return false; let arr = ref.split(','); if (!arr.includes(value) && !arr.includes(value + '')) return false; //字元，數字都支援 return true; }
校友錄小程式應用示例
static getFormCheckRules() { return { name: 'formName|required|string|min:2|max:20|name=校友姓名', sex: 'formSex|required|int|len:1|in:1,2|name=性別', item: 'formItem|required|string|min:2|max:50|name=班級', birth: 'formBirth|required|date|name=生日', enroll: 'formEnroll|required|int|len:4|name=入學年份', grad: 'formGrad|required|int|len:4|name=畢業年份', city: 'formCity|required|string|min:2|max:50|name=所在城市', native: 'formNative|required|string|min:2|max:50|name=籍貫', edu: 'formEdu|required|string|min:2|max:50|name=學歷', trade: 'formTrade|required|string|min:2|max:50|name=當前行業', workStatus: 'formWorkStatus|required|string|min:2|max:50|name=工作狀態', company: 'formCompany|required|string|min:2|max:50|name=工作單位', companyDef: 'formCompanyDef|required|string|min:2|max:50|name=單位性質', companyDuty: 'formCompanyDuty|string|min:2|max:50|name=工作職位', openSet: 'formOpenSet|required|int|len:1|in:1,8|name=聯絡方式公開方式', mobile: 'formMobile|string|min:2|max:50|name=電話', wechat: 'formWechat|string|min:2|max:50|name=微信', email: 'formEmail|email|min:2|max:50|name=Email', qq: 'formQq|string|min:2|max:50|name=QQ', desc: 'formDesc|string|max:500|name=自我介紹', resource: 'formResource|string|max:500|name=需求與資源', } } }