<script> 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, value, 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, trigger: 'blur', 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, max) { return Math.floor(Math.random() * (max - min) + min) }, // 切换验证码 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 生成四位随机验证码 makeCode(o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0, this.identifyCodes.length) ] } console.log(this.identifyCode) } } } </script> <style scoped> .identifybox{ display: flex; justify-content: space-between; margin-top:7px; } .iconstyle{ color:#409EFF; } </style>
最后的效果如下，当我们输入之后鼠标失去焦点就会进行验证：
总结
以上所述是小编给大家介绍的vue+element-ui集成随机验证码+用户名+密码的form表单验证功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: