vue2之简易的pc端短信验证码的问题及处理方法

前端  /  管理员 发布于 5年前   510

<提示语部分不要在意（非重点部分）>

简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的

子组件模板部分如下（code部分是很基础的）

子组件逻辑部分如下（code部分是很基础的）

在@/utils/validate.js中的使用正则代码

// 验证手机号码export const validatPhone = /^(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$///验证密码export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/

子组件逻辑部分如下（code部分是很基础的）

父组件中的模板部分

为什么需要使用set这个api方法呢

如下截图

可以学习下这个链接的使用set的例子

全局变量globals.js文件

[vue-set]的文档( cn.vuejs.org/v2/api/#Vue… )

说明（*****向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。）

export default { //判断是否点击了 isChick(data,key='disabled',count=0){  data[key] =true  if(count<=0){   data[key] =false  } }, //此处是重点 使用的vue官网给的api方法 [vue-set](https://cn.vuejs.org/v2/api/#Vue-set) sendCode(self,name,k,v){  self.$set(name,k,v) }}

父组件中的逻辑部分

总结

以上所述是小编给大家介绍的vue2之简易的pc端短信验证码的问题及处理方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue 实现通过手机发送短信验证码注册功能
• vue实现验证码按钮倒计时功能
• 在Vue项目中引入腾讯验证码服务的教程
• vue中手机号,邮箱正则验证以及60s发送验证码的实例
• vue实现验证码输入框组件
• Vue中添加手机验证码组件功能操作方法
• 简单实现vue验证码60秒倒计时功能
• vue生成随机验证码的示例代码
• Vue 短信验证码组件开发详解