form表单模板2
作者:互联网
1 <template> 2 <div> 3 <a-form :form="form" style="width:100%; margin: 10px auto;"> 4 <a-row :gutter="[16, 16]" type="flex" align="middle"> 5 <a-col :span="6" 6 ><a-form-item><span>新密码</span></a-form-item> 7 </a-col> 8 <a-col :span="18"> 9 <a-form-item> 10 <a-input-password 11 v-decorator="['password', validatorRules.password]" 12 type="password" 13 autocomplete="false" 14 placeholder="test123" 15 > 16 </a-input-password> </a-form-item 17 ></a-col> 18 </a-row> 19 <a-row :gutter="[16, 16]" type="flex" align="middle"> 20 <a-col :span="6" 21 ><a-form-item><span>确认密码</span></a-form-item> 22 </a-col> 23 <a-col :span="18"> 24 <a-form-item> 25 <a-input-password 26 v-decorator="['confirmPassword', validatorRules.confirmPassword]" 27 type="password" 28 autocomplete="false" 29 > 30 </a-input-password> 31 </a-form-item> 32 </a-col> 33 </a-row> 34 <a-form-item style="margin:16px 0"> 35 <a-row :gutter="[16, 16]" type="flex" align="middle" justify="center"> 36 <a-col :span="12"> 37 <a-button style="float:right;margin-right:16px" @click="prevStep" 38 >上一步</a-button 39 > 40 </a-col> 41 <a-col :span="12"> 42 <a-button 43 style="float:left;margin-left:16px" 44 :loading="loading" 45 type="primary" 46 @click="nextStep" 47 >提交</a-button 48 > 49 </a-col> 50 </a-row> 51 </a-form-item> 52 </a-form> 53 </div> 54 </template> 55 56 <script> 57 import { passwordChange } from '@/api/login' 58 export default { 59 name: 'Step2', 60 // components: { 61 // Result 62 // }, 63 props: { 64 userList: { 65 type: Object, 66 required: true, 67 default: () => {} 68 } 69 }, 70 data() { 71 return { 72 loading: false, 73 form: this.$form.createForm(this), 74 validatorRules: { 75 password: { 76 rules: [ 77 { 78 required: true, 79 pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, 80 message: '最少6个字符' 81 }, 82 { validator: this.handlePasswordLevel } 83 ] 84 }, 85 confirmPassword: { 86 rules: [ 87 { required: true, message: '密码不能为空!' }, 88 { validator: this.handlePasswordCheck } 89 ] 90 } 91 } 92 } 93 }, 94 methods: { 95 nextStep() { 96 let that = this 97 that.loading = true 98 this.form.validateFields((err, values) => { 99 if (!err) { 100 let params = {} 101 params.password = values.password 102 params.captcha = this.userList.smsCaptcha 103 params.phone = this.userList.phone 104 passwordChange(params) 105 .then(res => { 106 let userList = { 107 phone: this.userList.phone 108 } 109 setTimeout(function() { 110 that.$emit('nextStep', userList) 111 }, 1500) 112 }) 113 .catch(err => { 114 this.$message.error(err) 115 that.loading = false 116 }) 117 } else { 118 that.loading = false 119 } 120 }) 121 }, 122 prevStep() { 123 this.$emit('prevStep', this.userList) 124 }, 125 126 handlePasswordCheck(rule, value, callback) { 127 let password = this.form.getFieldValue('password') 128 if (value && password && value.trim() !== password.trim()) { 129 callback(new Error('两次密码不一致')) 130 } 131 callback() 132 } 133 } 134 } 135 </script> 136 <style lang="less" scoped> 137 .ant-form-item-label, 138 .ant-form-item-control { 139 line-height: 22px; 140 } 141 </style>
标签:loading,form,表单,userList,params,let,password,模板 来源: https://www.cnblogs.com/ankendejiblogs/p/15664433.html