這段時間在做員工管理的小程序，前期在登錄注冊上花了不少功夫，今天就給大家分享下。
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供蛟河網(wǎng)站建設、蛟河做網(wǎng)站、蛟河網(wǎng)站設計、蛟河網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、蛟河企業(yè)網(wǎng)站模板建站服務，十年蛟河做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。
效果圖，wxss的內(nèi)容較簡單，自己編寫即可。
##主要內(nèi)容
一、首先我是在util.js中引入表單正則驗證規(guī)則，給予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表單,內(nèi)容自己可以隨意規(guī)定，
這里，姓名一欄通常是算作8個字符，但是我測試后實際應為2-4字符，姓占位1-2字符，名占位1-2字符。不排除異類情況，如果是郵箱則不需要規(guī)定“maxlength”的數(shù)值。
手機號一欄必須規(guī)定長度，否則別人會隨便填寫錯誤手機號，當然這也是為了簡單驗證，嚴格來說是要給填寫的手機號發(fā)送驗證碼來驗證的，那需要收費，個人依情況而定。
提交表單【 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){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
wx.clearStorageSync(); //清除緩存
},
formSubmit:function(e){ //form提交內(nèi)容 對登錄信息做判斷
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(){ //登錄態(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; //姓名正則檢驗
var inputUserName = param.username.trim(); //輸入信息確認
var wellname = param.username.length; //字符長度確認
console.log(inputUserName, wellname)
if (userid.test(inputUserName) ){ //xxx.test是檢測函數(shù)。
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轉(zhuǎn)換為字符串
param = JSON.stringify(param);
wx.redirectTo({
url: '../main/index?param='+ param//參數(shù)只能是字符串形式，不能為json對象
})
},
onGotUserInfo: function (e) { //授權過后不再調(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({ //存儲數(shù)據(jù)并準備發(fā)送給下一頁使用
key: "myMessage",
data: e.detail.userInfo,
})
}
},
})
在這里進行引用驗證，
var xxx = util.regexConfig().xxx ;這里的第二個xxx是你自己命名的變量，姓名或者郵箱或者手機號進行對應選擇你在util.js中的變量命名。第一個xxx是你當前要引用的變量名
成功后的提示
以上所述是小編給大家介紹的小程序之簡單登錄注冊表單驗證詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
