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

先上图,再解释：

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: {}, // 设置请求的 headersuccess: 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就可以啦

小程序写手机号码查吉凶，有检验手机号码正确性相关推荐

用微信开发者小程序写一个加法计算器小程序
文章目录前言一.calculator.wxml代码二.calculator.js代码结果前言提示:用软件微信开发者小程序写一个加法计算器小程序一.calculator.wxml代码 &l ...
用微信小程序写一个计算器
下面是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下. 页面部分 <view class='box'><view class='txt'>{{screenNum} ...
【学习笔记】C#中HashTable和快速排序的用法，从单词频率统计小程序写起
先瞎扯点别的.进入这个神圣的地方总需要些鞭策,阿西巴,我是被鞭策进来摆摊的程序猿.软件工程老师说,写程序,发博客,就来博客园.这是个号召力很强的口号.最近看网络营销搜索引擎优化的书多一些,只能说王老 ...
微信小程序——获取当前人微信绑定的手机号码
做小程序项目时有一个需求,是点击某个按钮,之后要获取该微信绑定的手机号码, 1.第一步:写出页面  <view class="contai ...
小程序微信授权登录服务器异常,微信小程序授权登录流程（强制绑定手机号码）...
本文作为多平台用户登录模块设计的扩展设计,即以手机号作为用户的唯一凭证. (图片摘自 2018.10.30) 小程序与服务器是通过自定义登录态来识别用户身份的,以下简称口令(token). 由于微信未 ...
C语言时间管理小程序,写了一个时间管理的微信小程序
原标题:写了一个时间管理的微信小程序前言以前看过<把时间当作朋友>这本书,里面有个管理时间的观点个人觉得很有用,就是养成记录自己每天的时间消耗的一个习惯,这样有助于更有效地管理自己的时 ...
Rust盒子小程序更新拍照查外挂功能，还能查Steam账户信息
一出门就被爆锤?是技术太菜还是遇到了外挂?对于Rust玩家来说,碰到外挂司空见惯.那怎么快速判断对方是枪法好,还是开了挂? 一般情况下,被击杀多次后,老司机会抄下对方的SteamId号,切出游戏.去S ...
微信小程序系列（7）如何用微信小程序写一个论坛？贴心代码详解（五）删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
java查重小程序_”万能查重器“小程序
//今天组长让我写一个查重的的程序来给一个词库查重把相同的删除 //一开始我绞尽脑汁想用嵌套的for循环怎么都有bug 原因是&&和&的理解错误 //后来我想到了用Map集合 ...

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

小程序写手机号码查吉凶，有检验手机号码正确性相关推荐

最新文章

热门文章