<template>
<div class="main">
<div class="login">
<el-form
size="mini"
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="账号" prop="loginId">
<el-input v-model="ruleForm.loginId" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="loginPwd">
<el-input
type="password"
v-model="ruleForm.loginPwd"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
//验证登录名
var validateLoginId = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入登录名"));
}else {
callback();
}
};
//验证密码
var validateLoginPwd = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
}else {
callback();
}
};
return {
//表单输入数据
ruleForm: {
loginId: "",
loginPwd: "",
},
//表单验证数据
rules: {
loginId: [{ validator: validateLoginId, trigger: "blur" }],
loginPwd: [{ validator: validateLoginPwd, trigger: "blur" }],
},
};
},
methods: {
//表单提交方法
submitForm(formName) {
//判断表单数据是否验证成功
this.$refs[formName].validate((valid) => {
//验证成功
if (valid) {
alert("submit!");//可以改成请求api
} else {
//验证失败
console.log("error submit!!");
return false;
}
});
},
//表单重置方法
resetForm(formName) {
this.$refs[formName].resetFields();
console.log(this.ruleForm);
},
},
};
</script>
<style scoped>
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login {
width: 460px;
height: 220px;
border: 1px solid#ccc;
}
</style>
element-ui表单验证实例
最新推荐文章于 2022-09-20 20:38:26 发布