详细讲解小程序简单登录登记表的验证

期间一直在做一个员工管理的小程序，前期在登录和注册上花了不少功夫，今天就和大家分享一下。

渲染方面，wxss的内容比较简单，可以自己写。

# #主要内容

首先，我在util.js中介绍了表单的常规验证规则，并将其交给login.js参考

function regex config(){ var reg={ userid 3360/[a-za-z0-9]$/，//邮箱常规身份验证电话：/1 (3 | 4 | 5 | 7 | 8) \ d {9} $/，//手机号码常规身份验证卡3330 }模块。导出={formattime:formattime，regex config: regex config}验证结果

第二，在login.index中写一个表单，内容可以随意指定。

form bind submit=' formSubmit ' view class=' input-area ' view class=' input-log ' Image class=' user info-logIcon ' src=' http : { { logIcon } } '/Image input id=' username ' name=' username ' maxlength=' 4 ' type=' text '占位符=' name '/view view class=' input-log ' Image class=' user info-logIcon ' src=' http : { { pwdIcon } } '/Image input id='名字一栏通常算8个字符，但测试后实际应该是2-4个字符，姓占1-2个字符，名占1-2个字符。不排除异质性病例。如果是邮箱，不需要指定“maxlength”的值。

手机号码栏的长度一定要指定，否则别人会随便填错手机号码。当然，这也是为了简单验证。严格来说，需要给填好的手机号发验证码进行验证，需要收费，具体视情况而定。提交表单[formtype="submit"]。

三.login.js的内容

var util=require('././utils/util。js’)；var myMessage=页面({ data : { loginbttxt : }登录，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(选项){ //页面初始化选择为页面跳转所带来的参数wx。clearstorage sync()；//清除缓存}，formsubmit :函数(e){//form提交内容对登录信息做判断var param=e . detail。价值；这个。mysubmit(param)；console.log('登录页提交，param) }，mysubmit :函数(param){//验证帐号密码输入信息完整度var标志=这个。检查用户名(参数)。检查密码(参数)；console.log('信息填写，标志)如果(标志){这。setlogindata 1()；这个。CheckUserInfo(参数)；} }，setlogindata 1: function(){//登录态提示这个。setdata({ logintxt : '登录中，禁用：this.data.disabled，loginBtnBgBgColor: ' # 999 '，btnLoading:这个。数据。BTN loading })；}，setlogindata 2: function(){ this。setdata({ logintxt : '登录，禁用：this.data.disabled，loginBtnBgBgColor: ' # 0099FF '，btnLoading:这个。数据。BTN loading })；}，checkusername :函数(param){ var userid=util。regexconfig().卡片；//姓名正则检验var inputUserName=param。用户名。trim()；//输入信息确认变量井名=参数。用户名。长度；//字符长度确认console.log(inputUserName，well name)if(userid。test(inputUserName)){//XXX。试验是检测函数返回真；}else{ wx.showModal({ title: '提示，showCancel:false，content: '姓名输入错误' });返回false} }，checkpassword :函数(param){ var phone=util。regex config().电话；//校验手机号var inputPassword=param。密码。trim()；//核对输入手机号var密码=param。密码。长度；如果(电话。test(inputPassword)密码==11){//验证手机号格式及长度返回真；}else{ wx.showModal({ title: '提示，showCancel: false，content: '手机号输入错误' });返回false} }，CheckUserInfo : FuncTion(param){ var username=param。用户名。trim()；var密码=param。密码。trim()；param.username//提取帐号param.password//提取密码变量=这个；如果(用户名==goodname密码==goodpass){ //无需存贮，只为验证setTimeout(函数(){ wx。showtoast({ title : ' '，icon: 'success，duration : 1500 })；那个。setlogindata 2()；那个。redirecto(param)；},2000);}else{ wx.showModal({ title: '提示，showCancel:false，content: '信息有误，请重新输入' });这个。setlogindata 2()；} }，redirectto :函数(param){//需要将参数转换为字符串param=JSON。stringify(param)；wx.redirectTo({ url: './main/index？param=' param//参数只能是字符串形式，不能为数据对象}) }，onGotUserInfo:函数(e) { //授权过后不再调起//控制台。日志(例如详细信息。errmsg)控制台。日志(例如详细信息。userinfo)var tip=e . detail。userinfoif(tip==undefined){ wx。redirectto({ URL : './login/index '，}) }else{ wx.setStorage({ //存储数据并准备发送给下一页使用key: 'myMessage '，data: e.detail.userInfo，})} })(9502 . 163.com)

在这里进行引用验证，

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

以上是边肖介绍的小程序简单登录登记表的验证和整合。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！