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


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据option的value值快速设定初始的selected选项
Aug 13 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
实例讲解PHP表单处理
2019/02/15 PHP
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
JavaScript Canvas实现验证码
2020/08/02 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python实现二叉堆
2016/02/03 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python之Socket网络编程详解
2016/09/29 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python SVD压缩图像的实现代码
2019/11/05 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
计算机操作自荐信
2013/12/07 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
初中军训感想
2015/08/07 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
关于vue-router-link选择样式设置
2022/04/30 Vue.js