2018最新版 手机号、验证码正则表达式 jq + 小程序
2024-10-07 01:40:05
HTML：
<!-- 表单 -->
<input class="weui-input" id="tel" type="tel" placeholder="请输入手机号">
<input class="weui-input" type="number" id="number" placeholder="请输入验证码"> <!-- 错误提示 -->
<div class="mobile-err" id="mobile-err" style="display: none;">
<span></span>
</div>
JS :
$(function () {
//手机号验证
$("#tel").blur(function () {
var mobile=$(this).val();
var re=/^((([-]{})|([-]{})|([-]{})|([-]{}))+\d{})$/;
if (!re.test(mobile)){
$("#mobile-err span").html("请输入正确的手机号");
$("#mobile-err").show();
}
setTimeout(function () {
$("#mobile-err").fadeOut();
},)
});
//验证码验证 5位数字
$("#number").blur(function () {
var mobile=$(this).val();
var re=/^\d{}$/
if (!re.test(mobile)){
$("#mobile-err span").html("验证码错误");
$("#mobile-err").show();
}
setTimeout(function () {
$("#mobile-err").fadeOut();
},)
});
})
小程序
<view class="section">
<input placeholder="手机号" placeholder-style='color:#999;' type="number" auto-focus bindblur='telNum' />
</view>
<view class="section get-code cl">
<input placeholder="验证码" placeholder-style='color:#999;' type="number" maxlength="" bindblur='codeNum'/>
<button bindtap='getCode' class='get-code-btn' disabled="{{disabled}}">{{codeTxt}}</button>
</view>
<view class='btm-btn-ot'>
<form bindsubmit="submitBtn" report-submit="true">
<button class="form_button" form-type="submit">
<button class='sub-btn'>登录</button>
</button>
</form>
</view>
data: {
mobile:, //输入是否正确
code:,
mobileNum:'', //输入的手机号
codeNum:'',
codeTxt:'', //获取验证码 文字
disabled:'',
currentTime:
},
onLoad: function (options) {
var that = this;
that.setData({
codeTxt: '获取验证码'
})
},
// /**
// * 手机号
// */
telNum: function (e) {
var that = this;
var mobile = e.detail.value;
var myreg = /^((([-]{})|([-]{})|([-]{})|([-]{}))+\d{})$/;
if (mobile.length == ) {
wx.showToast({
title: '手机号为空',
icon: 'loading',
success:function(){
that.setData({
mobile: ,
})
}
})
return false;
} else if (!myreg.test(mobile)) {
wx.showToast({
title: '手机号有误',
icon: 'loading',
success: function () {
that.setData({
mobile: ,
})
}
})
return false;
} else {
that.setData({
mobile: ,
mobileNum: mobile,
})
}
},
// /**
// * 验证码
// */
codeNum: function (e) {
var that = this;
var code = e.detail.value;
var myreg = /^\d{}$/;
if (code.length == ) {
wx.showToast({
title: '验证码为空',
icon: 'loading',
success: function () {
that.setData({
code: ,
})
}
})
return false;
} else if (!myreg.test(code)) {
wx.showToast({
title: '验证码有误',
icon: 'loading',
success: function () {
that.setData({
code: ,
})
}
})
return false;
} else {
that.setData({
code: ,
codeNum: code
})
}
},
//验证码
getCode:function(){
let that = this;
if (that.data.mobile==){
wx.request({
url: _url + '/api/sendsms',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
phone: that.data.mobileNum,
},
success: function (e) {
console.log(e.data)
if (e.data.status == ) {
//发成功后不可点击
that.setData({
disabled: true
})
//60秒倒计时
var currentTime = that.data.currentTime;
that.setData({
codeTxt: '重新获取(' + currentTime + 's)'
})
var interval = setInterval(function () {
that.setData({
codeTxt: '重新获取(' + (currentTime - ) + 's)'
})
currentTime--;
if (currentTime <= ) {
clearInterval(interval)
that.setData({
codeTxt: '重新获取',
currentTime: ,
disabled: ''
})
}
}, )
wx.showToast({
title: '正确',
icon: 'success',
success: function () {
wx.showToast({
title: '请注意查收',
icon: 'success',
})
}
})
} else if (e.data.status == ) {
wx.showToast({
title: '验证码错误',
icon: 'loading',
})
}
}
})
}
},
//提交
submitBtn:function(e){
let that = this;
var m = that.data.mobile;
var c = that.data.code;
//判断 手机号和验证码格式无误后返回后台
if (m == || c == ) {
}else{
wx.showToast({
title: '错误',
icon: 'loading',
})
}
}
page{
padding: 56rpx;
background: #fff;
box-sizing: border-box;
}
.section{
height: 114rpx;
border-bottom: 1rpx solid #ebebeb ;
margin-bottom: 20rpx;
}
.section input{
width: %;
height: %;
line-height: 114rpx;
}
.get-code input{
width: 350rpx;
float: left;
font-size: 32rpx;
}
.get-code button{
/* display: inline-block; */
float: right;
color: #553a91;
font-size: 30rpx;
border: 1rpx solid #c8c0dc;
background: transparent;
border-radius: 32rpx;
padding: 20rpx 26rpx;
margin:22rpx ;
line-height: ;
}
.btm-btn-ot{
margin-top: 100rpx;
width: %;
box-sizing: border-box;
background: #fff;
}
.sub-btn{
width:%;
text-align:center;
background: rgba(, , , .);
padding:30rpx ;
color:#fff;
font-size:32rpx;
border-radius:48rpx;
font-weight:;
display:inline-block;
border:;
line-height:;
margin-bottom: 40rpx;
}
.sub-btn::after{
border:;
}
.sub-btn.active {
background:#553a91;
}
最新文章
- Rafy 框架 - 幽灵插件（假删除）
- css基础
- android 图像处理系列合集
- unbutu下搭建FTP服务
- 关于Javascript函数的几点笔记
- Delphi中的内存对齐 与 Packed关键字
- Linux下df与du两个命令的差别？
- NYIST OJ 题目42 一笔画问题
- Unity中的CG编写Shader系列(Blend)
- 201521123038 《Java程序设计》 第四周学习总结
- grid 布局
- Redis Codis 部署安装
- 搭建Node.js的Web框架egg.js
- 学习笔记: 异常状态管理，托管堆垃圾回收，CLR寄宿
- SQL进阶1：case表达式的用法示例
- form表单上传图片文件
- gevent实现基于epoll和协程的服务器
- repository test has failed 错误
- 将字符串以用二进制流的形式读入XML文件
- 极验(geetest)验证码