原生JS实现表单验证(基于正则表达式)

在静态表单的基础上,我们想一下要做的效果

我们想实现的效果:

1. 实现单击获取验证码时的倒计时效果😄

2. 通过正则表达式判断输入的姓名和电话号是否符合规范🙋

3. 如果符合规范会在后面打绿色的对号,不符合规范会在输入框里提示红色的提示字样🐶

4. 当姓名或手机号有不符合规范的时候点击提交会弹出不正确的提示框,二者都符合规范时点击提交弹出提交成功对话框💣

我们一个一个效果来完成,先看一下倒计时效果:

首先我们点击获取验证码这里,会立刻进入一个三秒钟的倒计时,然后里面的文字变成了倒计时秒数,并且在进入倒计时后再次点击就没有效果了,我们怎么完成这些效果呢?

先看一下示例代码:

btn.addEventListener(‘click’,function() {

var times = 3; //定义剩下的秒数

btn.disabled = true;

abc();//先调用一次这 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 个函数,防止刷新页面时点击按钮会延迟一秒

timer = setInterval(abc,1000);

function abc() {

btn.innerHTML &#

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值