詳解小程序之簡單登錄注冊表單驗證

2020-03-21 15:56:44

字體：大中小

來源：轉載

供稿：網友

這段時間在做員工管理的小程序，前期在登錄注冊上花了不少功夫，今天就給大家分享下。

效果圖，wxss的內容較簡單，自己編寫即可。

小程序,登錄,注冊,表單驗證

##主要內容

一、首先我是在util.js中引入表單正則驗證規則，給予login.js來引用

function regexConfig() { var reg = {  userid: /^[A-Za-z0-9]+$/, //郵箱正則驗證  phone: /^1(3|4|5|7|8)/d{9}$/, //手機號正則驗證  cards: /^[/u4e00-/u9fa5]{2,4}$/ //姓名漢字正則驗證 } return reg;}module.exports = { formatTime: formatTime, regexConfig: regexConfig}

驗證結果

小程序,登錄,注冊,表單驗證

二、在login.index中寫一個form表單,內容自己可以隨意規定，

<form bindsubmit="formSubmit">  <view class="input-area">   <view class="input-log">     <image class="userinfo-logIcon" src="{{logIcon}}"></image>     <input id="username" name="username" maxlength='4' type="text" placeholder="姓名" />   </view>   <view class="input-log">    <image class="userinfo-logIcon" src="{{pwdIcon}}"></image>     <input id="password" name="password" type="number" maxlength="11" placeholder="手機號" />   </view>  </view>  <view class="btn-area">    <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" disabled="{{disabled}}" style="background-color:{{loginBtnBgBgColor}}" formType="submit" loading="{{btnLoading}}"> {{loginBtnTxt}} </button>  </view></form><text class='tips' style=''>注意：只有在職人員方可登錄</text>

這里，姓名一欄通常是算作8個字符，但是我測試后實際應為2-4字符，姓占位1-2字符，名占位1-2字符。不排除異類情況，如果是郵箱則不需要規定“maxlength”的數值。

手機號一欄必須規定長度，否則別人會隨便填寫錯誤手機號，當然這也是為了簡單驗證，嚴格來說是要給填寫的手機號發送驗證碼來驗證的，那需要收費，個人依情況而定。
提交表單【 formType=“submit”】。

三、login.js內容

var util = require("../../utils/util.js");var myMessage="";Page({ data:{  loginBtnTxt:"登錄",  myMessage:"",  loginBtnBgBgColor:"#0099FF",  btnLoading:false,  disabled:false,  inputUserName: '',  inputPassword: '',  avatarUrl:"../../images/logo.jpg",  logIcon:"../../images/logIcon.png",  pwdIcon:"../../images/pwdIcon.png",  curNav: 1,  curIndex: 0 },  onLoad:function(options){  // 頁面初始化 options為頁面跳轉所帶來的參數  wx.clearStorageSync();  //清除緩存 }, formSubmit:function(e){ //form提交內容 對登錄信息做判斷  var param = e.detail.value;  this.mysubmit(param);  console.log("登錄頁提交",param)   }, mysubmit:function (param){  //驗證帳號密碼輸入信息完整度  var flag = this.checkUserName(param) && this.checkPassword(param);  console.log('信息填寫',flag)  if(flag){    this.setLoginData1();    this.checkUserInfo(param);  }  }, setLoginData1:function(){ //登錄態提示  this.setData({   loginBtnTxt:"登錄中",   disabled: !this.data.disabled,   loginBtnBgBgColor:"#999",   btnLoading:!this.data.btnLoading  }); }, setLoginData2:function(){  this.setData({   loginBtnTxt:"登錄",   disabled: !this.data.disabled,    loginBtnBgBgColor:"#0099FF",   btnLoading:!this.data.btnLoading  }); }, checkUserName:function(param){  var userid = util.regexConfig().cards; //姓名正則檢驗  var inputUserName = param.username.trim(); //輸入信息確認  var wellname = param.username.length; //字符長度確認  console.log(inputUserName, wellname)  if (userid.test(inputUserName) ){ //xxx.test是檢測函數。   return true;  }else{   wx.showModal({    title: '提示',    showCancel:false,    content: '姓名輸入錯誤'   });   return false;  } }, checkPassword:function(param){  var phone = util.regexConfig().phone; //校驗手機號  var inputPassword = param.password.trim(); //核對輸入手機號  var password = param.password.length;  if (phone.test(inputPassword) && password == 11 ){ //驗證手機號格式及長度   return true;  }else{   wx.showModal({    title: '提示',    showCancel: false,    content: '手機號輸入錯誤'   });   return false;  } }, checkUserInfo:function(param){  var username = param.username.trim();  var password = param.password.trim();  var goodname = param.username;  //提取帳號  var goodpass = param.password;  //提取密碼  var that = this;  if (username == goodname && password == goodpass){ //無需存貯，只為驗證    setTimeout(function(){     wx.showToast({      title: '',      icon: 'success',      duration: 1500     });     that.setLoginData2();     that.redirectTo(param);    },2000);  }else{   wx.showModal({    title: '提示',    showCancel:false,    content: '信息有誤，請重新輸入'   });   this.setLoginData2();  } }, redirectTo:function(param){  //需要將param轉換為字符串  param = JSON.stringify(param);  wx.redirectTo({   url: '../main/index?param='+ param//參數只能是字符串形式，不能為json對象  }) }, onGotUserInfo: function (e) { //授權過后不再調起   // console.log(e.detail.errMsg)   console.log(e.detail.userInfo)  var tip = e.detail.userInfo;  if (tip == undefined){   wx.redirectTo({    url: '../login/index',   })  }else{   wx.setStorage({  //存儲數據并準備發送給下一頁使用    key: "myMessage",    data: e.detail.userInfo,   })  } }, })

小程序,登錄,注冊,表單驗證