一、实现效果:
1、直接点击,不为空校验
2、输入手机号格式不正确时
3、获取完验证码进行读秒
二、页面html
<el-form
class="phone-form"
ref="form"
:model="form"
label-position="left"
size="small"
:rules="rules"
v-if="!loggingStatus"
>
<el-form-item
prop="phoneNum"
:rules="rules.phoneNum"
ref="phone"
>
<el-input
size="small"
placeholder="请输入手机号"
v-model="form.phoneNum"
class="input-with-select"
>
<el-select v-model="select" slot="prepend" placeholder="+86">
<el-option label="+86" value="+86"></el-option>
<el-option label="+40" value="+86"></el-option>
<el-option label="+111" value="+86"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item
prop="checkCode">
<el-input
class="check-code-box"
size="small"
v-model.number="form.checkCode"
placeholder="请输入验证码"
>
<el-button :disabled="codeCd" size="small" slot="append" @click="handleCaptcha('form')"
>获取验证码
<span v-if="codeCd">({{long}})</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item>
<el-button class="custom-button" @click="onSubmit('form')" type="primary"
>登录</el-button
>
</el-form-item>
</el-form>
三、vue文章来源:https://www.toymoban.com/news/detail-504901.html
data () {
const validatePhone = (rule, value, callback) => {
if (!value) {
callback(new Error('手机号不能为空'))
}
// 使用正则表达式进行验证手机号码
if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确'))
}
// 自定义校验规则 需要调用callback()函数!
callback()
}
return {
// 登录状态
loggingStatus: false,
// 验证码是否CD
codeCd: false,
// CD长度
long: 60,
select: '',
input: '',
form: {
phoneNum: null,
checkCode: null
},
rules: {
phoneNum: [
{ required: true, validator: validatePhone, trigger: 'blur' }
],
checkCode: [
{ required: true, message: '验证码不能为空哦!', trigger: 'blur' }
]
}
}
},
methods: {
// 获取手机验证码
handleCaptcha (form) {
this.$refs[form].validateField('phoneNum', async (valid) => {
if (!valid) {
// 获取验证码
captcha(this.form.phoneNum)
// 开启计时
this.codeCd = true
const timer = setInterval(() => {
this.long--
if (this.long <= 0) {
this.long = 60
this.codeCd = false
clearInterval(timer)
}
}, 1000)
} else {
console.log('error submit!!')
return false
}
})
}
}
四、总结
1、进行手机号校验关键在对单个手机号输入框进行校验,需要使用到validateField对部分表单字段进行校验,valid是校验完的提示信息,当valid为空时代表校验成功
2、读秒和设置禁用,在校验成功时设置一个60s计时器,读秒过程禁用按钮,用了element-ui的按钮组件,在读秒过程中给按钮增加disabled属性;读秒过程结束,解除按钮禁用文章来源地址https://www.toymoban.com/news/detail-504901.html
到了这里,关于2022.9.17 vue、element-ui实现登录获取手机验证码,进行手机号校验、验证码CD60秒的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!