updatePassword.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="page">
  3. <uni-nav-bar :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true" left-icon="left" title="修改登录密码" @clickLeft="back" />
  4. <view :style="{'marginTop':'10rpx'}">
  5. <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
  6. <u-form-item :labelWidth="80" label="手机号:" prop="phone" ref="item1">
  7. <u--input v-model="form.phone" placeholder="请输入手机号"></u--input>
  8. </u-form-item>
  9. <u-form-item :labelWidth="80" label="原密码:" prop="oldPassword" ref="item1">
  10. <u--input v-model="form.oldPassword" placeholder="请输入原密码" type="password"></u--input>
  11. </u-form-item>
  12. <u-form-item :labelWidth="80" label="新密码:" prop="newPassword" ref="item1">
  13. <u--input v-model="form.newPassword" placeholder="请输入新密码" type="password"></u--input>
  14. </u-form-item>
  15. </u--form>
  16. <view :style="{'marginTop':'100rpx'}">
  17. <u-button type="primary" text="提交" @click="updatePassword"></u-button>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. form:{
  27. phone:'',
  28. oldPassword:'',
  29. newPassword:''
  30. },
  31. rules: {
  32. 'phone': {
  33. type: 'string',
  34. required: true,
  35. min:11,
  36. max: 11,
  37. message: '请输入电话号码',
  38. trigger: ['blur', 'change']
  39. },
  40. 'oldPassword': {
  41. type: 'string',
  42. min:11,
  43. max: 16,
  44. required: true,
  45. message: '请输入6-18位老密码',
  46. trigger: ['blur', 'change']
  47. },
  48. 'newPassword': {
  49. type: 'string',
  50. min:6,
  51. max: 16,
  52. required: true,
  53. message: '请输入6-18位新密码',
  54. trigger: ['blur', 'change']
  55. }
  56. },
  57. }
  58. },
  59. methods: {
  60. updatePassword(){
  61. console.log("+++++++++++++++++++")
  62. this.$refs.uForm.validate().then(res => {
  63. uni.$u.toast('校验通过')
  64. }).catch(errors => {
  65. uni.$u.toast('校验失败')
  66. })
  67. },
  68. }
  69. }
  70. </script>
  71. <style>
  72. @import './index.rpx.css';
  73. </style>