文档章节

微信小程序-手机号验证

史文帝
 史文帝
发布于 2018/03/05 23:36
字数 326
阅读 999
收藏 0

    微信小程序 判断手机号,超简单实用

wxml:

<form bindsubmit="formSubmit">

 <!--form的bindsubmit属性是提交调用的事件-->

<input name="code" type='number' placeholder="请输入手机号" maxlength='11'/>

<!--type='number'  在微信的手机上会调用出手机数字键盘-->

<!-- maxlength='11'  这里限制了输入的文本长度-->

<view >

<input class="weui-input f36r" name="password" password placeholder="请输入密码" />

</view>

<button type="warn" formType="submit">登录</button>

<!--type='number'  在微信的手机上会调用出手机数字键盘-->

</form>

wxss:

//边框自定,无css

 

js:

Page({

/**

* 页面的初始数据

*/

data: { //数据暂无

},

formSubmit: function (e) {  //点击登录时,调用的函数

var data = e.detail.value;  //获取提交from的json数据

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;  //手机正则式

if (!myreg.test(data.code)) { //验证手机号

wx.showToast({

title: '手机号有误!',

icon: 'none',

duration: 1500

})

return false;

}

if (data.password != "123456") { //简单的验证密码

wx.showToast({

title: '密码不正确',

icon: 'none',

duration: 1500

})

return false;

}

wx.showToast({ //模拟请求数据中

title: '数据加载中',

icon: 'none',

duration: 10000,

success: function () { //模拟请求数据成功

wx.showToast({

title: '登录成功',

icon: 'success',

duration: 1000,

success: function () { //成功回调

wx.switchTab({ //js跳转的页面

url: '../index/index'

})

}

});

},

fail: function () { //模拟请求数据失败

wx.showToast({

title: '网络错误,请稍后登录',

icon: 'none',

duration: 3000,

});

}

});

 

}

})

 

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.7K
11
微信小程序授权获取手机号,提示获取失败,该appId没有权限

一、获取手机号按钮报错:提示获取失败,该appId没有权限 注:问题出现原因,当前小程序账号没有进行“微信认证”, 解决方案,点击微信认证详情,认证处理之后可以使用。 点击参考微信开发社...

tianma3798
2018/08/25
0
0
wemall 更新3.5.2,新增支持微信小程序开发

wemall微信商城 v3.5.2 更新 1.新增composer包管理 2.新增jwt登录验证支持微信小程序开发 3.更新微信开发框架类 ... 特色 1.支持微信小程序 2.支持订阅号,服务号和企业号 3.适合学习和研究 ...

einsqing
2016/10/15
1K
0
laravel5实现微信第三方登录功能

背景 最近手头一个项目需要实现用户在网站的第三方登录(微信和微博),后端框架laravel5.4。 实现过程以微信网页版第三方登录,其他于此类似,在此不做重复。 准备工作 网站应用微信登录是基于...

开元中国2015
2018/12/07
0
0
微信小程序Canvas隐藏问题处理

一、在微信小程序中Canvas控件还存在着许多问题 使用微信自带的Canvas控件,生成海报二维码时,会遇到canvas在绘制结束后,显示在页面的最上层。 使用 hidden或display:none 无效。 解决方案...

tianma3798
2018/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

网友第一次开发EOS区块链的经验

在处理项目时,用Java Connector for EOS区块链编写: 创建钱包 创建帐户 创建交易 创建签名交易 在帐户之间转移代币 我遇到了各种和运行本地EOS节点需要遵循的基本步骤。这个小指南纯粹是为...

geek12345
17分钟前
1
0
mybatis insert 动态生成插入的列及插入的值

代码如下 : 1.mapper.xml 文件 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"......

qimh
26分钟前
1
0
junit启动报错 Unable to find a @SpringBootConfiguration

环境 springboot项目 工程结构: test类编写: 异常 Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test ......

zzx10
27分钟前
1
0
Html5 学习

1、mui 框架中的 plusReady 真机运行,浏览器不执行 http://ask.dcloud.net.cn/question/31708。 2、参考网络请求 仿网页 https://www.jianshu.com/u/84b5ef6309d6...

QGlaunch
28分钟前
1
0
net.sf.ezmorph.bean.MorphDynaBean cannot be cast to com.console.demo.web.model.XXX

前景: net.sf.ezmorph.bean.MorphDynaBean cannot be cast to com.console.demo.web.model.XXX //jsonObject:所有参数//FreightTemplate对象里面包含一个 private List<FreightTemplateCi......

事儿爹
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部