<template>
|
<div class="container">
|
<el-form>
|
<el-form-item label="用户名：" label-width="100px">
|
<!-- <el-input autocomplete="off" class="input"></el-input> -->
|
<span>管理员</span>
|
</el-form-item>
|
<el-form-item label="用户密码：" prop="pass" label-width="100px">
|
<el-input
|
type="password"
|
v-model="ruleForm.pass"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="重复密码：" prop="checkPass" label-width="100px">
|
<el-input
|
type="password"
|
v-model="ruleForm.checkPass"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
var checkAge = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error("年龄不能为空"));
|
}
|
setTimeout(() => {
|
if (!Number.isInteger(value)) {
|
callback(new Error("请输入数字值"));
|
} else {
|
if (value < 18) {
|
callback(new Error("必须年满18岁"));
|
} else {
|
callback();
|
}
|
}
|
}, 1000);
|
};
|
var validatePass = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else {
|
if (this.ruleForm.checkPass !== "") {
|
this.$refs.ruleForm.validateField("checkPass");
|
}
|
callback();
|
}
|
};
|
var validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== this.ruleForm.pass) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
ruleForm: {
|
pass: "",
|
checkPass: "",
|
age: "",
|
},
|
rules: {
|
pass: [{ validator: validatePass, trigger: "blur" }],
|
checkPass: [{ validator: validatePass2, trigger: "blur" }],
|
age: [{ validator: checkAge, trigger: "blur" }],
|
},
|
};
|
},
|
methods: {
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert("submit!");
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
/* 让容器垂直水平居中 */
|
.container {
|
display: flex;
|
justify-content: center;
|
padding: 20px;
|
}
|
</style>
|
