From dff9fb32c1bac52d378a6d196f670b92610c01d3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 16 十二月 2021 17:21:49 +0800
Subject: [PATCH] 自适应2
---
src/pages/index/components/formAccount.vue | 266 ++++++++++++++++++++++++++--------------------------
1 files changed, 133 insertions(+), 133 deletions(-)
diff --git a/src/pages/index/components/formAccount.vue b/src/pages/index/components/formAccount.vue
index 0362ab5..16ae5a2 100644
--- a/src/pages/index/components/formAccount.vue
+++ b/src/pages/index/components/formAccount.vue
@@ -1,134 +1,134 @@
-<template>
- <div class="formAccount">
- <el-form ref="form" :model="form" label-width="90px" :rules="rules">
- <el-form-item label="鐢ㄦ埛鍚�" prop="username">
- <el-input
- v-model="form.username"
- placeholder="2-10浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧"
- ></el-input>
- </el-form-item>
-
- <el-form-item label="瀵嗙爜" prop="password">
- <el-input
- v-model="form.password"
- placeholder="鑷冲皯涓�6浣嶅瓧绗�"
- type="password"
- ></el-input>
- </el-form-item>
-
- <el-form-item label="纭瀵嗙爜" prop="repassword">
- <el-input
- v-model="form.repassword"
- placeholder="璇风‘璁ゅ瘑鐮�"
- type="password"
- ></el-input>
- </el-form-item>
- </el-form>
- </div>
-</template>
-
-<script>
-import { getRegInfo } from "../api";
-
-export default {
- data() {
- const validateName = (rule, value, callback) => {
- var reg = /^[A-Za-z][A-Za-z0-9]{0,}$/;
- if (!reg.test(value)) {
- return callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧"));
- } else callback();
- };
-
- const validateRePass = (rule, value, callback) => {
- if (this.form.password != value) {
- return callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷�"));
- } else callback();
- };
-
- return {
- form: {
- username: "",
- password: "",
- repassword: "",
- },
- rules: {
- name: [
- { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
- {
- min: 2,
- max: 10,
- message: "闀垮害鍦� 2 鍒� 10 涓瓧绗�",
- trigger: "blur",
- },
- { validator: validateName, trigger: "blur" },
- ],
- password: [
- { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
- {
- min: 6,
- max: 24,
- message: "鑷冲皯涓�6浣嶅瓧绗�",
- trigger: "blur",
- },
- ],
- repassword: [
- { required: true, message: "璇风‘璁ゅ瘑鐮�", trigger: "blur" },
- { validator: validateRePass, trigger: "blur" },
- ],
- },
- };
- },
- methods: {
- getFormData() {
- const _this = this;
- let data = null;
- this.$refs["form"].validate((valid) => {
- if (valid) {
- data = _this.form;
- } else {
- return false;
- }
- });
- return data;
- },
-
- async getRegInfo() {
- const res = await getRegInfo();
- console.log(res);
- },
- },
-};
-</script>
-
-<style lang="scss" scoped>
-.formAccount {
- .el-form-item ::v-deep {
- label {
- font-size: 14px;
- color: #fff;
- text-align: left;
- }
-
- .el-form-item__content {
- margin-left: 110px !important;
- }
-
- input {
- background-color: rgba(0, 0, 0, 0.1);
- color: #fff;
- border: none;
- caret-color: #fff !important;
- }
-
- input:-webkit-autofill,
- textarea:-webkit-autofill,
- select:-webkit-autofill {
- -webkit-text-fill-color: #fff !important;
- -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
- background-color: transparent;
- background-image: none;
- transition: background-color 50000s ease-in-out 0s; //鑳屾櫙鑹查�忔槑 鐢熸晥鏃堕暱 杩囨浮鏁堟灉 鍚敤鏃跺欢杩熺殑鏃堕棿
- }
- }
-}
+<template>
+ <div class="formAccount">
+ <el-form ref="form" :model="form" label-width="90px" :rules="rules">
+ <el-form-item label="鐢ㄦ埛鍚�" prop="username">
+ <el-input
+ v-model="form.username"
+ placeholder="2-10浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧"
+ ></el-input>
+ </el-form-item>
+
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ v-model="form.password"
+ placeholder="鑷冲皯涓�6浣嶅瓧绗�"
+ type="password"
+ ></el-input>
+ </el-form-item>
+
+ <el-form-item label="纭瀵嗙爜" prop="repassword">
+ <el-input
+ v-model="form.repassword"
+ placeholder="璇风‘璁ゅ瘑鐮�"
+ type="password"
+ ></el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script>
+import { getRegInfo } from "../api";
+
+export default {
+ data() {
+ const validateName = (rule, value, callback) => {
+ var reg = /^[A-Za-z][A-Za-z0-9]{0,}$/;
+ if (!reg.test(value)) {
+ return callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧"));
+ } else callback();
+ };
+
+ const validateRePass = (rule, value, callback) => {
+ if (this.form.password != value) {
+ return callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷�"));
+ } else callback();
+ };
+
+ return {
+ form: {
+ username: "",
+ password: "",
+ repassword: "",
+ },
+ rules: {
+ username: [
+ { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
+ {
+ min: 2,
+ max: 10,
+ message: "闀垮害鍦� 2 鍒� 10 涓瓧绗�",
+ trigger: "blur",
+ },
+ { validator: validateName, trigger: "blur" },
+ ],
+ password: [
+ { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
+ {
+ min: 6,
+ max: 24,
+ message: "鑷冲皯涓�6浣嶅瓧绗�",
+ trigger: "blur",
+ },
+ ],
+ repassword: [
+ { required: true, message: "璇风‘璁ゅ瘑鐮�", trigger: "blur" },
+ { validator: validateRePass, trigger: "blur" },
+ ],
+ },
+ };
+ },
+ methods: {
+ getFormData() {
+ const _this = this;
+ let data = null;
+ this.$refs["form"].validate((valid) => {
+ if (valid) {
+ data = _this.form;
+ } else {
+ return false;
+ }
+ });
+ return data;
+ },
+
+ async getRegInfo() {
+ const res = await getRegInfo();
+ console.log(res);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.formAccount {
+ .el-form-item ::v-deep {
+ label {
+ font-size: 14px;
+ color: #fff;
+ text-align: left;
+ }
+
+ .el-form-item__content {
+ margin-left: 110px !important;
+ }
+
+ input {
+ background-color: rgba(0, 0, 0, 0.1);
+ color: #fff;
+ border: none;
+ caret-color: #fff !important;
+ }
+
+ input:-webkit-autofill,
+ textarea:-webkit-autofill,
+ select:-webkit-autofill {
+ -webkit-text-fill-color: #fff !important;
+ -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+ background-color: transparent;
+ background-image: none;
+ transition: background-color 50000s ease-in-out 0s; //鑳屾櫙鑹查�忔槑 鐢熸晥鏃堕暱 杩囨浮鏁堟灉 鍚敤鏃跺欢杩熺殑鏃堕棿
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0