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


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 面向对象 重载
May 13 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
js如何取消事件冒泡
Sep 23 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
域名查询代码公布
2006/10/09 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
表彰大会主持词
2014/03/26 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
学校创先争优活动总结
2014/08/28 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
小学新教师个人总结
2015/02/05 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
详解Vue slot插槽
2021/11/20 Vue.js