微信小程序中input输入及动态设置按钮的实现

这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下

微信小程序 input输入及动态设置按钮的实现

【需求】实现当手机号已填写和协议已勾选时，“立即登录”按钮变亮，按钮可点击；若有一个不满足，按钮置灰，不可点击；实现获取短信验证码，倒计时提示操作；对不满足要求内容进行toast弹窗提示。

 view >
js
// 获取全局应用程序实例对象
const app = getApp()
Page({
 data: {
 //toast默认不显示
 isShowToast: false,
 mobile: #39; #39;,
 imgCode: #39; #39;,
 code: #39; #39;,
 // inviteCode: #39; #39;,
 errorContent: #39;请输入手机号 #39;,
 timer: 60,
 captchaText: #39;获取验证码 #39;,
 captchaSended: false,
 isReadOnly: false,
 capKey: #39; #39;,
 sendRegist: false,
 imgCodeSrc: #39; #39;,
 phoneAll: false,
 checkAgree:true,
 checkboxValue:[1],
 // 显示弹窗
 showToast(txt, duration = 1500) {
 //设置toast时间，toast内容
 this.setData({
 count: duration,
 toastText: txt
 var _this = this;
 // toast时间
 _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
 // 显示toast
 _this.setData({
 isShowToast: true,
 // 定时器关闭
 setTimeout(function () {
 _this.setData({
 isShowToast: false
 }, _this.data.count);
 // 双向绑定mobile
 mobileInput(e) {
 this.setData({
 mobile: e.detail.value
 if(this.data.mobile.length===11){
 this.setData({
 phoneAll: true
 }else if(this.data.mobile.length 11){
 this.setData({
 phoneAll: false
 // 双向绑定img验证码
 imgCaptchaInput(e) {
 this.setData({
 imgCode: e.detail.value
 // 双向绑定sms验证码
 smsCaptchaInput(e) {
 this.setData({
 code: e.detail.value
 // 同意协议
 checkboxChange(e) {
 this.data.checkboxValue = e.detail.value;
 if(this.data.checkboxValue[0]==1){
 this.setData({
 checkAgree: true
 }else {
 this.setData({
 checkAgree: false
 // 获取短信验证码
 getSMS() {
 var that = this.data;
 if (!that.mobile) {
 this.showToast( #39;请输入手机号 #39;);
 } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
 this.showToast( #39;请输入正确手机号 #39;);
 else if (that.imgCode.length != 4) {
 this.showToast( #39;请输入正确图片验证码 #39;);
 else {
 if (that.captchaSended) return;
 this.setData({
 captchaSended: true
 app.api.getSMSByMobileAndCaptcha({
 mobile: that.mobile,
 capKey: that.capKey,
 code: that.imgCode,
 type:1
 }).then((result) = {
 this.showToast(result.message);
 if (result.code != 1) {
 this.getImgCode();
 this.setData({
 captchaSended: false,
 } else {
 var counter = setInterval(() = {
 that.timer--;
 this.setData({
 timer: that.timer,
 captchaText: `${that.timer}秒`,
 isReadOnly: true
 if (that.timer === 0) {
 clearInterval(counter);
 that.captchaSended = false;
 that.captchaText = #39;获取验证码 #39;;
 this.setData({
 timer: 60,
 captchaText: #39;获取验证码 #39;,
 captchaSended: false
 }, 1000);
 // 获取图形码
 getImgCode() {
 var capKey = zdx-weixin + Math.random();
 this.setData({
 imgCodeSrc: http://prezdx.geinihua.com/invite/WeChat/verify?capKey= + capKey,
 capKey: capKey
 //用户使用协议
 xieyi() {
 wx.navigateTo({
 url: #39;../userXieyi/userXieyi #39;
 // 注册
 regist() {
 var that = this.data;
 if(!that.checkAgree||!that.phoneAll){
 return
 // sessionCheck为1，目的是防止微信code码先于session过期
 var code = wx.getStorageSync( #39;wxCode #39;);
 var sessionCheck = wx.getStorageSync( #39;sessionCheck #39;);
 wx.setStorageSync( #39;mobile #39;,that.mobile);
 if (!that.mobile) {
 this.showToast( #39;请输入手机号 #39;);
 } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
 this.showToast( #39;请输入正确手机号 #39;);
 } else if (that.code.length != 6) {
 this.showToast( #39;请输入正确验证码 #39;);
 } else {
 wx.showLoading({
 title: #39;加载中... #39;,
 app.api.loginByCaptcha({
 mobile: that.mobile,
 smsCode: that.code,
 code: code,
 sessionCheck:sessionCheck,
 }).then((res) = {
 wx.hideLoading();
 if (res.code == 2||res.code==1) {
 //注册成功
 wx.setStorageSync( #39;token #39;, res.businessObj.token);
 wx.setStorageSync( #39;userId #39;,res.businessObj.userId);
 this.sucessCb(res);
 app.globalData.isLogin = true; //设置为登录成功
 } else {
 this.showToast(res.message);
 // 成功回调
 sucessCb(res) {
 wx.redirectTo({
 url: #39;/pages/index/index #39;
 onLoad: function () {
 this.getImgCode();
 var that=this;
 if(wx.getStorageSync( #39;mobile #39;)){
 that.setData({
 mobile: wx.getStorageSync( #39;mobile #39;),
 if(this.data.mobile.length===11){
 this.setData({
 phoneAll: true
})
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

微信小程序实现点击按钮移动view标签的位置功能

以上就是微信小程序中input输入及动态设置按钮的实现的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！