小程序游戏开发_微信小程序 input输入及动态设置

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

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

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

 view 
 !--手机号-- 
 view 
 text 手机号 /text 
 input value="{{mobile}}" placeholder- placeholder="11位手机号码" type="number" maxlength="11"
 bindinput="mobileInput"/ 
 /view 
 !--图片验证码-- 
 view 
 view 
 text 图形验证码 /text 
 input placeholder- placeholder="输入图形验证码" type="text" maxlength="4"
 bindinput="imgCaptchaInput"/ 
 /view 
 image src="{{imgCodeSrc}}" bindtap="getImgCode" /image 
 /view 
 !--短信验证码-- 
 view 
 view 
 text 验证码 /text 
 input placeholder- placeholder="输入验证码" type="number" maxlength="6"
 bindinput="smsCaptchaInput"/ 
 /view 
 view bindtap="getSMS" {{captchaText}} /view 
 /view 
 view 
 checkbox-group bindchange="checkboxChange" 
 checkbox value="1" checked="true" bindchange="checkboxChange" /checkbox 
 /checkbox-group 
 span 已阅读并同意 /span text bindtap="xieyi" 《用户使用协议》 /text 
 /view 
 view class="regist {{phoneAll checkAgree 'active':''}}" bindtap="regist" 立即登录 /view 
 /view 
 !--mask-- 
 view wx:if="{{isShowToast}}" /view 
 !--以下为toast显示的内容-- 
 view wx:if="{{isShowToast}}" 
 view 
 view 
 {{toastText}}
 /view 
 /view 
 /view 

js

// 获取全局应用程序实例对象
const app = getApp()
Page({
 data: {
 //toast默认不显示
 isShowToast: false,
 mobile: '',
 imgCode: '',
 code: '',
 // inviteCode: '',
 errorContent: '请输入手机号',
 timer: 60,
 captchaText: '获取验证码',
 captchaSended: false,
 isReadOnly: false,
 capKey: '',
 sendRegist: false,
 imgCodeSrc: '',
 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('请输入手机号');
 } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
 this.showToast('请输入正确手机号');
 else if (that.imgCode.length != 4) {
 this.showToast('请输入正确图片验证码');
 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 = '获取验证码';
 this.setData({
 timer: 60,
 captchaText: '获取验证码',
 captchaSended: false
 }, 1000);
 // 获取图形码
 getImgCode() {
 var capKey = "zdx-weixin" + Math.random();
 this.setData({
 imgCodeSrc: "invite/WeChat/verify capKey=" + capKey,
 capKey: capKey
 //用户使用协议
 xieyi() {
 wx.navigateTo({
 url: '../userXieyi/userXieyi'
 // 注册
 regist() {
 var that = this.data;
 if(!that.checkAgree||!that.phoneAll){
 return
 // sessionCheck为1,目的是防止微信code码先于session过期
 var code = wx.getStorageSync('wxCode');
 var sessionCheck = wx.getStorageSync('sessionCheck');
 wx.setStorageSync('mobile',that.mobile);
 if (!that.mobile) {
 this.showToast('请输入手机号');
 } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
 this.showToast('请输入正确手机号');
 } else if (that.code.length != 6) {
 this.showToast('请输入正确验证码');
 } else {
 wx.showLoading({
 title: '加载中...',
 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('token', res.businessObj.token);
 wx.setStorageSync('userId',res.businessObj.userId);
 this.sucessCb(res);
 app.globalData.isLogin = true; //设置为登录成功
 } else {
 this.showToast(res.message);
 // 成功回调
 sucessCb(res) {
 wx.redirectTo({
 url: '/pages/index/index'
 onLoad: function () {
 this.getImgCode();
 var that=this;
 if(wx.getStorageSync('mobile')){
 that.setData({
 mobile: wx.getStorageSync('mobile'),
 if(this.data.mobile.length===11){
 this.setData({
 phoneAll: true

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!