小程序写手机号码查吉凶,有检验手机号码正确性
2017-03-31 15:42
375 查看
先上图,再解释:
wxml:
wxss样式:
js代码:
由于我请求的api是来自己与极速数据的,所以是私人的appkey。不方便透露,大家可以去注册一下,里面可以免费申请使用的。换成自己的appkey就可以啦
wxml:
<form bindsubmit="formSubmit" class="form"> <input name="tranNum" type="digit" placeholder="请输入手机号码" class="tranNum" bindinput="checkNum"/> <view class="err-view {{flag == true ? 'show' :'hidden'}}">请输入正确的手机号码</view> <button form-type="submit" class="btn-search">查吉凶</button> </form> <view class="result-view">查询结果是:</view> <view class="text-view">所在城市:{{city}}</view> <view class="text-view">主人个性:{{character}}</view> <view class="text-view">具体表现:{{characterdetail}}</view>
wxss样式:
.form .tranNum{ font-size: 28rpx; color: #666; height: 80rpx; width:96%; margin-left: 2%; line-height: 80rpx; text-align: center; border: 1px solid #d1d1d1; border-radius: 4rpx; margin-top: 100rpx; } .form .err-view{ color: #d4361d; font-size: 12px; padding-left: 2%; margin:8rpx 0rpx; } .form .show{ display: block; } .form .hidden{ display: none; } .form .btn-search{ width: 40%; text-align: center; margin-top: 30rpx; height: 70rpx; line-height: 70rpx; font-size: 30rpx; } .result-view{ font-size: 40rpx; color: #777; margin-top: 40rpx; padding-left: 2%; } .text-view{ color: #00bba1; font-size: 26rpx; margin: 20rpx 0rpx; padding-left: 2%; line-height: 60rpx; } .fresh-na{ color: #777; margin-left: 2%; font-size: 30rpx; margin-top: 40rpx; }
js代码:
//index.js //获取应用实例 var app = getApp() Page({ data: { flag:false, city:'', character:"", characterdetail:'' }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, checkNum:function(e){ var pattern = /[^\d]/g; var flag = pattern.test(e.detail.value); if(flag){ this.setData({ flag:true }); }else{ this.setData({ flag:false }) }; }, formSubmit: function(e) { var that = this; var num = e.detail; console.log(e.detail); var url ='https://api.jisuapi.com/mobileluck/query?appkey=(ps:你的appkey)'; //请求的url地址; wx.request({ url: url, data: { mobile:e.detail.value.tranNum }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function(res){ if(res.data.msg == 'ok'){ that.setData({ city:res.data.result.city, characterdetail:res.data.result.characterdetail, character:res.data.result.character }); }else{ that.setData({ flag:true }); } console.log(res) }, fail: function() { // fail }, complete: function() { // complete } }) console.log('form发生了submit事件,携带数据为:', e.detail.value.tranNum) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
由于我请求的api是来自己与极速数据的,所以是私人的appkey。不方便透露,大家可以去注册一下,里面可以免费申请使用的。换成自己的appkey就可以啦
相关文章推荐
- 做一个程序来查询手机号码的归属地(使用的是HttpURLConnection的post提交方式)
- 检验手机号码
- h5、js最详细的正则检验手机号码
- 正则表达式验证手机号码格式的正确性
- 手机号码归属地最新数据库2015年3月(附带采集更新程序)
- JS最新手机号码检验正则表达式
- 微信小程序--菜谱列表+手机吉凶查询
- 小程序使用wx.chooseAddress获取用户手机号码,微信chooseAddress接口获取收货信息
- [置顶] 微信小程序通过getPhoneNumber后台PHP解密获取用户手机号码
- 自己的服务解密,获取微信小程序用户的手机号码
- 正则验证身份证 程序验证手机号码
- 最新手机号码检验正则表达式
- 在android中读取联系人信息的程序,包括读取联系人姓名、手机号码和邮箱
- C# 自动投票和手机号码归属地查询 - 简单程序源码分享(高手飘过)
- 微信小程序解密getPhoneNumber手机号,小程序解码getPhoneNumber获取手机号码——玩转小程序114
- 手机号码正确性的验证
- 在android中读取联系人信息的程序,包括读取联系人姓名、手机号码和邮箱
- JS最新手机号码检验正则表达式
- 判断手机号码是否合法(完整实现程序)
- JS最新手机号码检验正则表达式