inleft
2022-02-20 28d46dfc072a13859a5c0bc4901645b77022c7c3
commit | author | age
1ad93b 1 <template>
06ee76 2     <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
L 3         <a-form-model-item has-feedback label="Password" prop="pass">
4             <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
1ad93b 5         </a-form-model-item>
06ee76 6         <a-form-model-item has-feedback label="Confirm" prop="checkPass">
L 7             <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
1ad93b 8         </a-form-model-item>
06ee76 9         <a-form-model-item has-feedback label="Age" prop="age">
L 10             <a-input v-model.number="ruleForm.age" />
1ad93b 11         </a-form-model-item>
I 12         <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
06ee76 13             <a-button type="primary" @click="submitForm('ruleForm')">
L 14                 Submit
1ad93b 15             </a-button>
06ee76 16             <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
1ad93b 17                 Reset
I 18             </a-button>
19         </a-form-model-item>
20     </a-form-model>
21 </template>
22 <script>
23     export default {
24         data() {
06ee76 25             let checkPending;
L 26             let checkAge = (rule, value, callback) => {
27                 clearTimeout(checkPending);
28                 if (!value) {
29                     return callback(new Error('Please input the age'));
30                 }
31                 checkPending = setTimeout(() => {
32                     if (!Number.isInteger(value)) {
33                         callback(new Error('Please input digits'));
34                     } else {
35                         if (value < 18) {
36                             callback(new Error('Age must be greater than 18'));
37                         } else {
38                             callback();
39                         }
40                     }
41                 }, 1000);
42             };
43             let validatePass = (rule, value, callback) => {
44                 if (value === '') {
45                     callback(new Error('Please input the password'));
46                 } else {
47                     if (this.ruleForm.checkPass !== '') {
48                         this.$refs.ruleForm.validateField('checkPass');
49                     }
50                     callback();
51                 }
52             };
53             let validatePass2 = (rule, value, callback) => {
54                 if (value === '') {
55                     callback(new Error('Please input the password again'));
56                 } else if (value !== this.ruleForm.pass) {
57                     callback(new Error("Two inputs don't match!"));
58                 } else {
59                     callback();
60                 }
61             };
62
63             let validateContent = (rule, value, callback) => {
64                 console.log(1111);
65                 if (1 == 1) {
66                     this.$refs.ruleForm.validateField('checkPass');
67                 } 
68                 callback();
69             };
1ad93b 70             return {
06ee76 71                 ruleForm: {
L 72                     pass: '',
73                     checkPass: '',
74                     age: '',
1ad93b 75                 },
I 76                 rules: {
06ee76 77                     pass: [{
L 78                         validator: validatePass,
1ad93b 79                         trigger: 'change'
I 80                     }],
06ee76 81                     checkPass: [{
L 82                         validator: validatePass2,
1ad93b 83                         trigger: 'change'
I 84                     }],
06ee76 85                     age: [{
L 86                         validator: checkAge,
1ad93b 87                         trigger: 'change'
I 88                     }],
06ee76 89                     common: [{
L 90                         validator: validateContent,
91                         trigger: 'change'
92                     }],
93                 },
94                 layout: {
95                     labelCol: {
96                         span: 4
97                     },
98                     wrapperCol: {
99                         span: 14
100                     },
1ad93b 101                 },
I 102             };
103         },
104         methods: {
06ee76 105             submitForm(formName) {
L 106                 this.$refs[formName].validate(valid => {
1ad93b 107                     if (valid) {
I 108                         alert('submit!');
109                     } else {
110                         console.log('error submit!!');
111                         return false;
112                     }
113                 });
114             },
06ee76 115             resetForm(formName) {
L 116                 this.$refs[formName].resetFields();
1ad93b 117             },
I 118         },
119     };
120 </script>