elmentui的短信验证界面_[javascript] elementui下login登录页界面和js验证逻辑

GO-IMAP网页版邮箱imap工具登录页

.bd-placeholder-img-lg {

font-size: 3.5rem;

}

}

html,

body {

height:100%;

}

body {

display:-ms-flexbox;

display: flex;-ms-flex-align: center;

align-items: center;

padding-top: 40px;

padding-bottom: 40px;

background-color: #f5f5f5;

}

.form-signin {

width:100%;

max-width: 400px;

padding: 20px;

margin: auto;

background: #fff;-webkit-box-shadow: 0 1px 2px 0 rgba(101,129,156,.08);

box-shadow: 0 1px 2px 0 rgba(101,129,156,.08);

}

邮箱网页版IMAP工具

立即登录

重置

© 2020

newVue({

el:'#app',

data: {

loading:false,

ruleForm:{

server:'',

email:'',

password:'',

},

rules: {

server: [

{ required:true, message: 'IMAP服务器如"imap.sina.net:143"包含端口号', trigger: 'blur'},

],

email: [

{ required:true, message: '邮箱地址', trigger: 'blur'},

],

password: [

{ required:true, message: '邮箱密码', trigger: 'blur'},

],

},

},

methods: {//提交表单

submitForm(formName){

let _this=this;this.$refs[formName].validate((valid) =>{if(valid) {var data={}

data.server=_this.ruleForm.server;

data.email=_this.ruleForm.email;

data.password=_this.ruleForm.password;

_this.loading=true;

$.post("/check",data,function(data){if(data.code==200){

_this.$message({

message: data.msg,

type:'success'});

window.location.href="/";

}else{

_this.$message({

message: data.msg,

type:'error'});

}

_this.loading=false;

});

}else{return false;

}

});

},//重置表单

resetForm(formName) {this.loading=false;this.$refs[formName].resetFields();

},

}

})