vue元素用户界面集成随机验证码用户名密码的形式表单验证功能

在登入页面，我们往往需要通过输入验证码才能进行登入，那我们下面就详讲一下在某视频剪辑软件项目中如何配合元素用户界面实现这个功能

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

模板div class=' s-canvas ' canvas id=' s-canvas ' : width=' content width ' : height=' content height '/canvas/div/模板脚本导出默认值{ name : ' SIdentify '，prop 3360 {识别代码： { type : String，default: '1234' }，字号min 33: { type 33333: Number，default: 16生成一个随机数randomNum(min，max){返回数学。地板(数学。random()*(max-min)min)}，//生成一个随机的颜色randomColor(min，max) { var r=this.randomNum(min，max) var g=this.randomNum(min，max) var b=this.randomNum(min，max)返回rgb(' r '，' g '，' b ')' }，draw pic(){ var canvas=document。getelementbyid(' s-canvas ')var CTX=canvas。getcontext(' 2d ')CTX。文本基线='底部'//绘制背景CTX。fillstyle=this。randomcolor(这个。backgroundcolormin这个。背景色彩最大)CTX。填充矩形(0，0，this.contentWidth，this.contentHeight) //绘制文字用于(设I=0；我喜欢这个。识别代码。长度；i ) { this.drawText(ctx，this.identifyCode[i]，I)}这个。(CTX)画这条线。画点(ctx)，画文字(CTX，txt，I){ CTX。fillstyle=this。randomcolor(这个。colormin这个。CTX。font=this。randomnum(这个。字体大小，这个。font size max)' px SimHei ' var x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度))变量y修改坐标原点和旋转角度平移(x，y)旋转(度*数学).PI/180) ctx.fillText(txt，0，0) //恢复坐标原点和旋转角度旋转(-度*数学. PI/180) ctx.translate(-x，-y) }，drawLine(ctx) { //绘制干扰线用于(设I=0；i8；我){ CTX。strokestyle=这个。randomcolor(这个。linecolormin这个。CTX。贝金帕斯(CTX)。moveto(this.randomNum(0，this.contentWidth)，this.randomNum(0，this。内容高度))CTX。行到(这个。randomnum(0，this.contentWidth)，this。randomnum(0，这个。内容高度))CTX。stroke()}，drawDot(ctx) { //绘制干扰点用于(设I=0；CTX。fillstyle=this。兰多姆颜色(0，255)CTX。begin path()CTX。arc(this.randomNum(0，this.contentWidth)，this。randomnum(0，this.contentHeight)，1，0，2 * Math .皮)CTX。fill()} } } }，watch : {识别码(){ this。draw pic()} }，mounted(){ this。draw pic()} }/script第二步：使用该组件：

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

模板El-form class=' log in-form ' status-icon : rules=' loginRules ' ref=' loginForm ' : model=' loginForm ' label-width=' 0 ' El-form-item prop=' username ' El-input size=' small ' @ key up。进入。native=' handlelog in ' v-model=' loginFOrm。用户名'自动完成='关闭'占位符='请输入用户名I槽='前缀' class='图标-胡勇/I/El-input/El-form-item El-form-item prop=' password ' El-input size=' small ' @ key up。进入。native=' handlelog in ' : type=' password type ' v-model=' login form。密码“自动完成=‘关闭’占位符=”请输入密码I class=' El-icon-view El-input _ _ icon ' : style=' font style ' slot='后缀@ click=' show password '/I I slot=' prefix ' class=' icon-mima '/I/El-input/El-form-item El-form-item prop='验证码'！-注意：道具与投入绑定的值一定要一致，否则验证规则中的价值会报未定义，因为价值即为绑定的投入输入值-El-input v-model=' loginFOrm。'验证代码'占位符='请输入验证码class=' identify input '/El-input/El-form-item El-form-item div class=' identify box ' div @ click=' refresh code ' s-identify : identify code=' identify code '/s-identify/div El-button @ click=' refresh code ' type=' text ' class=' text BTN '看不清，换一张/El-button/div/El-form-item El-checkbox v-model='选中'记住账号/El-checkbox El-form-item El-button type=' primary ' size=' small ' @单击。本地人。阻止=' handlelog in '类=' log in-submit '登录/El-按钮/El-表单-项目/El-表单/模板第三步：生产随机码与进行登入验证

脚本从“@/utils/validate”导入{ isvalidUsername }，从“@/components/identify/identify”导入SIdentify。vue ' export default { name : ' user log in '，data() { //用户名自定义验证规则const validateUsername=(规则、值、回调)={ if(！isvalidUsername(值)){回调（新错误('请输入正确的用户名))} else { console.log('user '，value) callback() } } //验证码自定义验证规则const validateVerifycode=(规则、值、回调)={ if(值==='') {回调（新错误('请输入验证码))} else if (value！==这个。识别代码){控制台。日志(' validateverifycode : '，值)回调（新错误('验证码不正确!'))} else { callback()} }返回{ font style : { }，loginforum : { username : ' admin '，password: '123456 '，verifycode: '' }，checked: false，identifyCodes: ' 1234567890 '，identifyCode: ' '，loginruless 3360 {//绑定在形式表单中的验证规则用户名：[{要求：为真，触发器：为‘模糊’，验证器：验证用户名}]，密码：[{要求：为真，消息： '请输入密码，trigger: 'blur' }，{ min: 6，message: '密码长度最少为6位，trigger: 'blur' } ]，verifycode :[{必需的： true，trigger: 'blur '，验证器： validateVerifycode }]}，passwordType: 'password' } }，components: { SIdentify }，已创建(){ },已装载(){ //验证码初始化这个。识别代码=' this。制作代码(这个。识别代码，4) }，computed: { }，prop :[]，methods: { //通过改变投入的类型使密码可见显示密码(){ this。font style==' '？(这个。font style=' color : red '):(这个。font style=' ')//改变密码可见按钮颜色this.passwordType===' '？(这个。密码类型=' password '):(这。密码类型=' ')}，//点击登入按钮handleLogin() { this .参考文献。登录信息。验证(有效={如果(有效){这.$store.dispatch('Login '，this.loginForm).然后(res={ this .$路由器。push({ path : '/dashboard/dashboard ' })})}，//生成随机数randomNum(min，max){返回数学。地板(数学。random()*(max-min)min)}，//切换验证码刷新代码(){ this。识别代码=' this。制作代码(这个。识别代码，4) }，//生成四位随机验证码makeCode(o，l) { for(让I=0；我。我){这个。识别代码=这个。识别代码[这个。randomnum(0，这个。识别代码。长度)]}控制台。日志(这个。识别代码)} } }/脚本样式范围。识别框{ display : flex正义-内容：空格；页边距-top :7 px；}.iconstyle { color: # 409EFF}/样式最后的效果如下，当我们输入之后鼠标失去焦点就会进行验证：

总结

以上所述是小编给大家介绍的某视频剪辑软件元素用户界面集成随机验证码用户名密码的形式表单验证功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！