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


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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
js验证是否为数字的总结
Apr 14 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
python对象及面向对象技术详解
2016/07/19 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python实现图片添加文字
2019/11/26 Python
Python读取csv文件实例解析
2019/12/30 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
幼儿园中秋节活动方案2013
2014/01/29 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
函授生自我鉴定
2014/03/25 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
委托函范文
2015/01/29 职场文书
会计稽核岗位职责
2015/04/13 职场文书
无罪辩护词范文
2015/05/21 职场文书
军训决心书范文
2015/09/22 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Oracle锁表解决方法的详细记录
2022/06/05 Oracle