| 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> | |
