elementui登录页面,vue element admin登录
这篇文章主要为大家详细介绍了某视频剪辑软件元素-用户界面实现登录注册表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素-用户界面实现登录注册表单的具体代码，供大家参考，具体内容如下
登录注册表单验证
通过元素-用户界面的表单实现登录注册的表单验证
效果图如下
注册
登录表单
登录的实现，需要通过手机号或者邮箱进行登录，验证手机号或者邮箱符合要求
//登录表单验证的代码
//模板的代码
埃尔格式
:model=ruleForm
:rules=rules
ref=ruleForm
标签宽度= 100像素
class=demo-ruleForm
el-form-item prop=user
埃尔输入
type=text
占位符=请输入手机号或者邮箱号
必需=必需
v-model=ruleForm.user
prefix-icon= El-icon-user-solid
/el-input
/El-表单-项目
el-form-item prop=通过
埃尔输入
type=password
占位符=请输入密码
prefix-icon=el-icon-lock
v-model=ruleForm.pass
@ keyup。进入。native=提交表单(规则表单)
/el-input
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )登录/el-button
/El-表单-项目
/el格式
//脚本的代码
//两个验证，验证密码不能为空，验证，手机号或者邮箱是否符合要求
data() {
var有效通行证=(规则，值，回调)={
if (value===) {
回调（新错误(请输入密码))
}否则{
回调()
}
}
var validateUser=(规则，值，回调)={
if (value===) {
回调（新错误(手机号或者邮箱不能为空))
}否则{
常量=/^1[34578][0-9]\d{8}$/
//eslint-disable-next-line unused-escape
const reg2=/^([a-z0-9_\.-] )@([\da-z\-] )\。([a-z\ .]{2,6})$/
如果((reg。测试(值) reg 2。测试(值))){
回调()
}否则{
回调（新错误(请输入正确的手机号或者邮箱))
}
}
}
返回{
//获取全球资源定位器(统一资源定位器)地址后面的参数
urlQuery: ，
活跃指数：“1”，
规则形式：{
通过： ,
用户：""
},
规则：{
用户：[{ required: true，validateUser，trigger: blur }]，
通过：[{必需：真，验证：验证通过，触发：模糊 }]
}
}
},
注册表单验证
注册表单的实现，注册有用户名，以及通过手机或者邮箱获取验证码，之后输入密码，且需要再次确认密码是否一致
//注册表单的代码
El-form:model= rule form :rules= rules ref= rule form class= demo-rule form
el-form-item prop=user1
埃尔-输入类型=文本占位符=用户名required= required v-model=规则形式。用户1 前缀-图标= El-图标-用户-实体/El-输入
/El-表单-项目
el-form-item prop=pass1
El-input class= phone-input placeholder=手机号/邮箱v-model=ruleForm.pass1 前缀-icon= El-icon-移动电话/El-输入
/El-表单-项目
El-form-item prop= code class= phone v-show= yzmshow
El-input v-model=规则形式。代码“placeholder=”验证码：minlength= 6 :maxlength= 6 /El-input
El-button type= primary @ click= get code() class= code-BTN :disabled=！显示
显示发送验证码/span
span v-show=！show class= count { { count } } s/span
/el-button
/El-表单-项目
el-form-item prop=通过
埃尔-输入类型=密码占位符=请输入密码v-model=ruleForm.pass 前缀-icon=el-icon-lock/el-input
/El-表单-项目
el-form-item prop=checkPass
埃尔-输入类型=密码占位符=请再次输入密码v-model=规则形式。check pass prefix-icon= El-icon-lock /El-input
/El-表单-项目
el-form-item class=btn-form
El-button type= primary @ click= submit form( rule form )注册/el-button
！-El-button @ click=重置表单(规则表单)重置/El-按钮-
/El-表单-项目
/el格式
//脚本中数据()的代码
data() {
var validateUser1=async(规则，值，回调)={
if (value===) {
回调（新错误(请输入用户名))
}否则{
如果（值){
const RES=等待请求。post(/API/用户/检查用户名是否存在，{
用户名：this.ruleForm.user1
})
console.log(res)
if (res.data.code===20000) {
回调()
}否则{
返回回调（新错误(该用户名已经被注册))
}
}
}
}
var validatePass1=async(规则，值，回调)={
if (value===) {
回调（新错误(手机号或者邮箱不能为空))
}否则{
常量=/^1[34578][0-9]\d{8}$/
//eslint-disable-next-line unused-escape
const reg2=/^([a-z0-9_\.-] )@([\da-z\-] )\。([a-z\ .]{2,6})$/
如果((reg。测试(值) reg 2。测试(值))){
this.yzmshow=true
回调()
}否则{
回调（新错误(请输入正确的手机号或者邮箱))
}
}
}
var有效通行证=(规则，值，回调)={
if (value===) {
回调（新错误(请输入密码))
}否则{
if (this.ruleForm.checkPass！==) {
这个参考文献。规则形式。验证字段(“检查通过”)
}
回调()
}
}
var validateCode=(规则，值，回调)={
if (value===) {
回调（新错误(请输入验证码))
}否则{
如果(这个。规则形式。代码。长度===6){
回调()
}否则{
回调（新错误(验证码不正确))
}
}
}
var validatePass2=(规则，值，回调)={
if (value===) {
回调（新错误(请再次输入密码))
} else if(值！==this.ruleForm.pass) {
回调（新错误(两次输入密码不一致!))
}否则{
回调()
}
}
返回{
活跃指数：“2”，
loginForm: {
手机： ,
代码： ,
此代码：""
},
秀：真的，
计数： ,
计时器：空，
yzmshow:假的，
规则形式：{
用户1: ,
第一遍： ,
通过： ,
检查通过： ,
zhecode: ，
手机： ,
电话代码： ,
电子邮件代码： ,
代码：""
},
规则：{
代码：[{
必填：真，
验证器：validateCode，
触发器："模糊"
},
{
分钟：6,
最大值：6,
消息： 长度为6,
触发器："模糊"
}
],
用户1: [{
必填：真，
验证器：validateUser1，
触发器："模糊"
}],
传递1: [{
必填：真，
验证器：validatePass1
触发器："模糊"
}],
//密码
通过：[{
必填：真，
验证器：validatePass
触发器："模糊"
},
{
分钟：6,
消息： 长度在不少于6个字符，
触发器："模糊"
}
],
//校验密码
检查通过：[{
必填：真，
验证器：validatePass2
触发器："模糊"
},
{
分钟：6,
消息： 长度在不少于6个字符，
触发器："模糊"
}
]
}
}
},
需要验证手机号或者邮箱是否符合要求，如果符合的话显示验证码
点击发送验证码进行60年代倒计时，在倒计时中，不能再发送验证码
关于vue。j组件的教程，请大家点击专题vue。j组件学习教程进行学习。
更多某视频剪辑软件学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。