详解小程序之简单登录注册表单验证


Posted in Javascript onMay 13, 2019

这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下。

效果图,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,
   })
  }
 },
 
})

详解小程序之简单登录注册表单验证

在这里进行引用验证,

var xxx = util.regexConfig().xxx ;这里的第二个xxx是你自己命名的变量,姓名或者邮箱或者手机号进行对应选择你在util.js中的变量命名。第一个xxx是你当前要引用的变量名
成功后的提示

 详解小程序之简单登录注册表单验证

以上所述是小编给大家介绍的小程序之简单登录注册表单验证详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
Vue性能优化的方法
Jul 30 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 #Javascript
vue项目前端知识点整理【收藏】
May 13 #Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
koa+mongoose实现简单增删改查接口的示例代码
May 13 #Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 #Javascript
You might like
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python实现数组插入新元素的方法
2015/05/22 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python使用KNN算法手写体识别
2018/02/01 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
医院后勤自我鉴定
2013/10/13 职场文书
行政助理工作职责范本
2014/03/04 职场文书
高三高考决心书
2014/03/11 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2014年党务工作总结
2014/11/25 职场文书
实习计划书范文
2015/01/16 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
你知道Java Spring的两种事务吗
2022/03/16 Java/Android