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


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 OFFICE控件测试代码
Dec 08 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
JavaScript实现留言板案例
Mar 17 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
用PHP连接Oracle数据库
2006/10/09 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
jQuery分组选择器用法实例
2014/12/23 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
升国旗仪式主持词
2014/03/19 职场文书
质量承诺书格式
2014/05/20 职场文书
征兵宣传标语
2014/06/20 职场文书
新兵入伍心得体会
2014/09/04 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android