验证xhtml5不支持元素_Vue实战088：简单的验证码倒计时功能实现

这是个发送验证码时常用的功能，当用户点击【发送验证码】之后出现【重新获取60s后】。在倒计时期间禁止用户继续发送验证码，待倒计时结束之后才可以再次发送验证码。这个可以避免重复发送请求获取多个验证码信息(但是只有最后一次才是有效的)，你也不知道自己发送了几次请求，当手机接收到验证码之后容易误以为是正确的验证码。所以做适当的控制是非常有必要的，同时也可以防止恶意发送请求消耗服务器资源。

HTML构建

为了方便这里我们用ElementUI来实现，在el-form-item中利用el-button按钮来实现验证码发送。发送验证码之后直接在el-button上修改现实中在HTML中的【发送验证码】内容，利用disabled属性来控制el-button的是否可以点击。

重新获取倒计时

定义一个retrieve()方法开启倒计时功能，利用setInterval计时器每隔一秒钟调用一次函数，当倒计时结束时通过clearInterval()来关闭计时器。这里我们需要做的是刷新时间和重定义el-button中的HTML内容，disable是用来控制el-button按钮是否可点击的属性。注意：disabled属性别用this.$refs.onConfirm.disbaled=true来定义，会报警告的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabled"。

发送验证码

在发送之前我们需要对表单中的数据进行校验，这里为什么要嵌套两个validateField呢(validateField支持校验组数)？。因为validateField校验子表单数据时每校验一个值都会返回校验结果，当校验不通过时Error返回值为校验的提示信息，当通过时Error的值为空，所以我们在if语句中用(！Error)表示校验通过。那么这就存在一个问题如果校验数组的话就会进行多次校验，也就会发送多次验证请求。(点一次请求却收到多条验证码这显然是不合理的！)

总结：

这里主要的就是retrieve()方法的定义和动态改变HTML内容，可以利用Vue提供的$ref来快速的定位DOM元素实现属性的修改。以上内容是小编给大家分享的【Vue实战088：简单的验证码倒计时功能实现】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：