参考了一些获取验证码的方式,再次封装一下获取验证码按钮,以及手机号码的正则处理

#import <UIKit/UIKit.h>

@interface UIButton (GetVerifyCode)
- (void)setTimeForTwinkle:(NSInteger)time ;
   //twinkleTitle:(NSString *)title;

@end


#import "UIButton+GetVerifyCode.h"

/**
 *  记录原始的title
 */
static    NSString *titleForOriginal;
/**
 *  闪烁时间
 */
static NSInteger timeForTwinkle;
@implementation UIButton (GetVerifyCode)
- (void)setTimeForTwinkle:(NSInteger)Time
   //twinkleTitle:(NSString *)Title
{
    self.enabled = NO;
    if (self.titleLabel.text != nil) {
        titleForOriginal = self.titleLabel.text;
    }
    //设置获取验证码定时器的时间
    timeForTwinkle = Time;
    [self setTitle:[NSString stringWithFormat:@"%zd秒",timeForTwinkle] forState:UIControlStateDisabled];
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timerFired:) userInfo:nil repeats:YES];
}
//定时器的功劳
-(void)timerFired:(NSTimer *)timer
{
    if (timeForTwinkle !=1) {
        timeForTwinkle -=1;
        [self setTitle:[NSString stringWithFormat:@"%ld秒",timeForTwinkle] forState:UIControlStateDisabled];
    } else {
        [timer invalidate];
        self.enabled = YES;
        [self setTitle:titleForOriginal forState:UIControlStateNormal];
    }
}

@end
<p style="margin-top: 0px; margin-bottom: 0px; font-size: 16px; line-height: normal; font-family: Menlo; color: rgb(201, 27, 19);"><pre name="code" class="objc">#import <Foundation/Foundation.h>

@interface NSString (Extension)
- (BOOL)isPhoneNumber;
- (BOOL)isEmailAdress;
/**
 *  返回字符串所占用的尺寸
 *
 *  @param font    字体
 *  @param maxSize 最大尺寸
 */
- (CGSize)sizeWithFont:(UIFont *)font maxSize:(CGSize)maxSize;
@end

 
#import "NSString+Extension.h"

@implementation NSString (Extension)

- (BOOL)match:(NSString *)pattern
{
    // 1.创建正则表达式
    NSRegularExpression *regex = [[NSRegularExpression alloc] initWithPattern:pattern options:0 error:nil];
    // 2.测试字符串
    NSArray *results = [regex matchesInString:self options:0 range:NSMakeRange(0, self.length)];
    
    return results.count > 0;
}
- (BOOL)isPhoneNumber
{
    NSString *pattern = @"^1[3578]\\d{9}$";
    return [self match:pattern];
}
- (BOOL)isEmailAdress
{
    NSString *pattern = @"^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$";
    return [self match:pattern];
}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一些思路和代码示例。下面是一个简单的获取验证码组件的示例: ```html <template> <div class="verification-code"> <input type="text" v-model="phoneNumber" placeholder="请输入手机号" /> <button :disabled="countdown > 0" @click="getCode">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { phoneNumber: "", countdown: 0, buttonText: "获取验证码", timer: null, }; }, methods: { getCode() { if (!this.phoneNumber) { alert("请输入手机号!"); return; } // 发送验证码接口 // ... // 模拟倒计时 this.countdown = 60; this.buttonText = `${this.countdown}秒后重新获取`; this.timer = setInterval(() => { this.countdown--; if (this.countdown <= 0) { clearInterval(this.timer); this.timer = null; this.buttonText = "获取验证码"; } else { this.buttonText = `${this.countdown}秒后重新获取`; } }, 1000); }, }, beforeDestroy() { if (this.timer) { clearInterval(this.timer); this.timer = null; } }, }; </script> <style scoped> .verification-code { display: flex; flex-direction: row; justify-content: center; align-items: center; } input { width: 80%; height: 40px; font-size: 16px; padding: 5px; margin-right: 10px; border-radius: 4px; } button { width: 20%; height: 40px; background-color: #409eff; border: none; color: #fff; font-size: 16px; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #b5b5b5; cursor: not-allowed; } </style> ``` 这个组件包含一个输入框和一个按钮,当用户点击按钮时,会触发 `getCode` 方法,该方法会先检查用户输入的手机号,然后向后端发送验证码请求,并开启一个模拟的倒计时,防止用户重复获取验证码。在倒计时过程中,按钮会显示剩余时间,倒计时结束后,按钮会重新变为可用状态。同时,为了防止组件销毁时倒计时仍然在进行,我们需要在组件销毁前清除计时器。 以上示例代码基于 Vue.js 和 uni-app 框架,您可以根据您的实际需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值