elementui自定义表单验证规则,element自定义表单验证
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现登录随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现登录随机验证码的具体代码，供大家参考，具体内容如下
验证码验证只是前端，无需后台交互
首先，创建一个identify.vue页面，用于写各种：随机数字/字母，随机颜色，干扰点/线
identify.vue
模板
画布
画布id= s-canvas :宽度=内容宽度:高度=内容高度
/画布
/div
/模板
脚本
导出默认值{
名称：侧面识别，
道具：{
识别码：{
类型：字符串，
默认值："1234"
},
fontSizeMin: {
类型：数量，
默认值：16
},
fontSizeMax: {
类型：数量，
默认值：40
},
backgroundColorMin: {
类型：数量，
默认值：180
},
backgroundColorMax: {
类型：数量，
默认值：240
},
colorMin: {
类型：数量，
默认值：50
},
colorMax: {
类型：数量，
默认值：160
},
lineColorMin: {
类型：数量，
默认值：40
},
lineColorMax: {
类型：数量，
默认值：180
},
dotColorMin: {
类型：数量，
默认值：0
},
dotColorMax: {
类型：数量，
默认值：255
},
内容宽度：{
类型：数量，
默认值：112
},
内容高度：{
类型：数量，
默认值：38
}
},
方法：{ //生成一个随机数
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
},
//生成一个随机的颜色
随机颜色(最小值，最大值){
var r=this.randomNum(最小值，最大值)
var g=this.randomNum(最小值，最大值)
var b=this.randomNum(最小值，最大值)
返回" rgb( r ， g ， b )"
},
drawPic() {
var canvas=文档。getelementbyid( s-canvas )
var ctx=canvas.getContext(2d )
ctx.textBaseline=bottom
//绘制背景
ctx.fillStyle=this.randomColor(
this.backgroundColorMin，
this.backgroundColorMax)
ctx.fillRect(0，0，this.contentWidth，this.contentHeight)
//绘制文字
对于(设I=0；我这个。识别代码。长度；i ) {
this.drawText(ctx，this.identifyCode[i]，I)
}
本。画线(ctx)
这个。绘图点(ctx)
},
drawText(ctx，txt，i) {
CTX。填充样式=this。随机颜色(这个。color min，this.colorMax)
CTX。font=this。random num(这个。最小字体大小，这个。font size max) px sim hei ；
var x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度^ 1))
var y=this。random num(这个。最大字体大小，this.contentHeight - 5)
var deg=this.randomNum(-45，45)
//修改坐标原点和旋转角度
ctx.translate(x，y)
ctx.rotate(度数*数学/180).
ctx.fillText(txt，0，0)
//恢复坐标原点和旋转角度
CTX . rotate(-deg * Math ./180).
ctx.translate(-x，-y)
},
绘制线(ctx) {
//绘制干扰线
对于(设I=0；I 8；i ) {
CTX。笔画风格=这个。随机颜色(这个。线条颜色最小值，this.lineColorMax)
ctx.beginPath()
ctx.moveTo(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight))
ctx.lineTo(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight))
ctx.stroke()
}
},
绘图点(ctx) {
//绘制干扰点
对于(设I=0；i 100i ) {
CTX。填充样式=this。随机颜色(0.255)
ctx.beginPath()
ctx.arc(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight)，1，0，2 * Math .PI)
ctx.fill()
}
}
},
观察：{
identifyCode() {
this.drawPic()
}
},
已安装(){
this.drawPic()
}
}
/脚本
然后就是在你需要的页面
超文本标记语言代码只是简单的输入行，图片，加验证码替换
@ keyup。进入。native=提交表单()是我登录时摁下进入直接登录的方法可有可无，自己选择
el-form-item prop=verifycode
El-输入v-model= param。验证代码 placeholder=请输入验证码class= identify input @ keyup。进入。native= submit form()
/el-input
/El-表单-项目
埃尔-表单-项目
div class=identifybox
div @click=refreshCode
s-identify:识别码=识别码/s-identify
/div
El-button @ click=刷新代码 type= text class= text BTN 看不清，换一张/el-button
/div
/El-表单-项目
然后就是脚本
首先引入侧面识别
导入侧标识自././components/page/identify.vue
下面各种方法，验证及规则就直接写完了
导出默认值{
数据：函数(){
/* 自定义验证码规则*/
const validateVerifycode=(规则，值，回调)={
if (value===) {
回调（新错误(请输入验证码))
} else if(值！==this.identifyCode) {
控制台。log( validateVerifycode:，value)；
回调（新错误(验证码不正确!))
}否则{
回调()
}
}
返回{
识别码：“1234567890 abcdefghijklmnopqrstuvwxyz”，
识别码："",
规则：{
验证代码：[{
必填：真，
触发器："模糊",
验证器：validateVerifycode，
}]
}
};
},
组件：{
侧面识别
},
已安装(){
这个。识别代码=" "；
这个。做代码(这个。识别代码，4)；
disableBrowserBack()；
history.pushState(null，null，document .网址);
如果(窗口。历史窗口。历史。pushstate){
$(窗口)。on(popstate ，函数(){
窗户。历史。pushstate( forward ，null， )；
窗户。历史。前进(1)；
});
窗户。历史。pushstate( forward ，null， )；//在工业管理学(工业工程)中必须得有这两行
窗户。历史。前进(1)；
},
方法：{
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
},
//切换验证码
refreshCode() {
this.identifyCode=
这个。做代码(这个。识别代码，4)
},
makeCode(o，l) {
对于(设I=0；I l；i ) {
这个。识别码=这个。识别代码[
this.randomNum(0，this.identifyCodes.length)]
}
console.log(this.identifyCode)
/* alert(this.identifyCode) */
}
}
}
到这就已经完成了，还可以添加钢性铸铁样式完美一下。识别框{
显示器：flex
justify-content:space-between；
边距-顶部：7px
}
验证码分享就这么多了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。