vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

前端之家收集整理的这篇文章主要介绍了vue+element-ui集成随机验证码+用户名+密码的form表单验证功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能

第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下:

第二步:使用该组件:

我们首先新建一个vue组件,在该组件进行布局,其中还包括用户名和密码的验证(这只是前端的简单验证,真实项目中还需要请求登入接口进行后端验证)

第三步:生产随机码与进行登入验证

import { isvalidUsername } from '@/utils/validate' import SIdentify from '@/components/identify/identify.vue' export default { name: 'userlogin',data() { // 用户名自定义验证规则 const validateUsername = (rule,value,callback) => { if (!isvalidUsername(value)) { callback(new Error('请输入正确的用户名')) } else { console.log('user',value) callback() } } // 验证码自定义验证规则 const validateVerifycode = (rule,callback) => { if (value === '') { callback(new Error('请输入验证码')) } else if (value !== this.identifyCode) { console.log('validateVerifycode:',value) callback(new Error('验证码不正确!')) } else { callback() } } return { fontstyle: { },loginForm: { username: 'admin',password: '123456',verifycode: '' },checked: false,identifyCodes: '1234567890',identifyCode: '',loginRules: { // 绑定在form表单中的验证规则 username: [ { required: true,trigger: 'blur',validator: validateUsername } ],password: [ { required: true,message: '请输入密码',trigger: 'blur' },{ min: 6,message: '密码长度最少为6位',trigger: 'blur' } ],verifycode: [ { required: true,validator: validateVerifycode } ] },passwordType: 'password' } },components: { SIdentify },created() { },mounted() { // 验证码初始化 this.identifyCode = '' this.makeCode(this.identifyCodes,4) },computed: { },props: [],methods: { // 通过改变input的type使密码可见 showPassword() { this.fontstyle === '' ? (this.fontstyle = 'color: red') : (this.fontstyle = '') // 改变密码可见按钮颜色 this.passwordType === '' ? (this.passwordType = 'password') : (this.passwordType = '') },// 点击登入按钮 handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.$store.dispatch('Login',this.loginForm).then(res => { this.$router.push({ path: '/dashboard/dashboard' }) }) } }) },// 生成随机数 randomNum(min,// 切换验证码 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes,// 生成四位随机验证码 makeCode(o,l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0,this.identifyCodes.length) ] } console.log(this.identifyCode) } } }

最后的效果如下,当我们输入之后鼠标失去焦点就会进行验证:

总结

以上所述是小编给大家介绍的vue+element-ui集成随机验证码+用户名+密码的form表单验证功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

原文链接:https://www.f2er.com/vue/31204.html

猜你在找的Vue相关文章