快捷導(dǎo)航

詳解小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證

更新時(shí)間：2019年05月13日 15:54:43 作者：沉默的小猴子

這篇文章主要介紹了小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

效果圖，wxss的內(nèi)容較簡(jiǎn)單，自己編寫(xiě)即可。

##主要內(nèi)容

一、首先我是在util.js中引入表單正則驗(yàn)證規(guī)則，給予login.js來(lái)引用

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

module.exports = {
 formatTime: formatTime,
 regexConfig: regexConfig
}

驗(yàn)證結(jié)果

二、在login.index中寫(xiě)一個(gè)form表單,內(nèi)容自己可以隨意規(guī)定，

<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="手機(jī)號(hào)" />
   </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個(gè)字符，但是我測(cè)試后實(shí)際應(yīng)為2-4字符，姓占位1-2字符，名占位1-2字符。不排除異類(lèi)情況，如果是郵箱則不需要規(guī)定“maxlength”的數(shù)值。

手機(jī)號(hào)一欄必須規(guī)定長(zhǎng)度，否則別人會(huì)隨便填寫(xiě)錯(cuò)誤手機(jī)號(hào)，當(dāng)然這也是為了簡(jiǎn)單驗(yàn)證，嚴(yán)格來(lái)說(shuō)是要給填寫(xiě)的手機(jī)號(hào)發(fā)送驗(yàn)證碼來(lái)驗(yàn)證的，那需要收費(fèi)，個(gè)人依情況而定。
提交表單【 formType=“submit”】。

三、login.js內(nèi)容

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){
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  wx.clearStorageSync();  //清除緩存
 },
 formSubmit:function(e){ //form提交內(nèi)容 對(duì)登錄信息做判斷
  var param = e.detail.value;
  this.mysubmit(param);
  console.log("登錄頁(yè)提交",param)
  

 },
 mysubmit:function (param){  //驗(yàn)證帳號(hào)密碼輸入信息完整度
  var flag = this.checkUserName(param) && this.checkPassword(param);
  console.log('信息填寫(xiě)',flag)
  if(flag){
    this.setLoginData1();
    this.checkUserInfo(param);
  } 
 },
 setLoginData1:function(){ //登錄態(tài)提示
  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; //姓名正則檢驗(yàn)
  var inputUserName = param.username.trim(); //輸入信息確認(rèn)
  var wellname = param.username.length; //字符長(zhǎng)度確認(rèn)
  console.log(inputUserName, wellname)
  if (userid.test(inputUserName) ){ //xxx.test是檢測(cè)函數(shù)。
   return true;
  }else{
   wx.showModal({
    title: '提示',
    showCancel:false,
    content: '姓名輸入錯(cuò)誤'
   });
   return false;
  }
 },
 checkPassword:function(param){
  var phone = util.regexConfig().phone; //校驗(yàn)手機(jī)號(hào)
  var inputPassword = param.password.trim(); //核對(duì)輸入手機(jī)號(hào)
  var password = param.password.length;
  if (phone.test(inputPassword) && password == 11 ){ //驗(yàn)證手機(jī)號(hào)格式及長(zhǎng)度
   return true;
  }else{
   wx.showModal({
    title: '提示',
    showCancel: false,
    content: '手機(jī)號(hào)輸入錯(cuò)誤'
   });
   return false;
  }
 },
 checkUserInfo:function(param){
  var username = param.username.trim();
  var password = param.password.trim();
  var goodname = param.username;  //提取帳號(hào)
  var goodpass = param.password;  //提取密碼
  var that = this;
  if (username == goodname && password == goodpass){ //無(wú)需存貯，只為驗(yàn)證
    setTimeout(function(){
     wx.showToast({
      title: '',
      icon: 'success',
      duration: 1500
     });
     that.setLoginData2();
     that.redirectTo(param);
    },2000);
  }else{
   wx.showModal({
    title: '提示',
    showCancel:false,
    content: '信息有誤，請(qǐng)重新輸入'
   });
   this.setLoginData2();
  }
 },
 redirectTo:function(param){
  //需要將param轉(zhuǎn)換為字符串
  param = JSON.stringify(param);
  wx.redirectTo({
   url: '../main/index?param='+ param//參數(shù)只能是字符串形式，不能為json對(duì)象
  })
 },
 onGotUserInfo: function (e) { //授權(quán)過(guò)后不再調(diào)起
   // 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({  //存儲(chǔ)數(shù)據(jù)并準(zhǔn)備發(fā)送給下一頁(yè)使用
    key: "myMessage",
    data: e.detail.userInfo,
   })
  }
 },
 
})