1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| <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"
| show-password
| ></el-input>
| </el-form-item>
|
| <el-form-item label="确认密码" prop="repassword">
| <el-input
| v-model="form.repassword"
| placeholder="请确认密码"
| type="password"
| show-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>
|
|
