微信小程序 判断手机号,超简单实用
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,
});
}
});
}
})