标签：loading form 表单 userList params let password 模板
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。