您的位置:首页 > 移动开发 > 微信开发

小程序写手机号码查吉凶,有检验手机号码正确性

2017-03-31 15:42 375 查看
先上图,再解释:



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就可以啦
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: