Changepassword.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view class="OutermostLayer">
  3. <h4>登录密码修改</h4>
  4. <view class="xgmy">
  5. <u--form labelPosition="left" labelWidth='180' :model="model1" :rules="rules" ref="form1">
  6. <u-form-item label="旧登录密码" prop="userInfo.oldpasswoed" borderBottom ref="item1">
  7. <u--input v-model="model1.userInfo.oldpasswoed" border="surround"></u--input>
  8. </u-form-item>
  9. <u-form-item label="新登录密码" prop="userInfo.mewpasswoed1" borderBottom ref="item1">
  10. <u--input v-model="model1.userInfo.mewpasswoed1" border="surround"></u--input>
  11. </u-form-item>
  12. </u-form-item>
  13. <u-form-item label="请再次输入" prop="userInfo.mewpasswoed2" borderBottom ref="item1">
  14. <u--input v-model="model1.userInfo.mewpasswoed2" border="surround"></u--input>
  15. </u-form-item>
  16. </u--form>
  17. <view class="tijiao">
  18. <u-button type="primary" @click="submit">确定修改</u-button>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. model1: {
  28. userInfo: {
  29. oldpasswoed: '',
  30. mewpasswoed1: '',
  31. mewpasswoed2: '',
  32. },
  33. },
  34. rules: {
  35. 'userInfo.oldpasswoed': {
  36. type: 'string',
  37. required: true,
  38. message: '请填写旧登录密码',
  39. trigger: ['blur', 'change']
  40. },
  41. 'userInfo.mewpasswoed1': {
  42. type: 'string',
  43. required: true,
  44. message: '请填写新登录密码',
  45. trigger: ['blur', 'change']
  46. },
  47. 'userInfo.mewpasswoed2': {
  48. type: 'string',
  49. required: true,
  50. message: '请填写新登录密码',
  51. trigger: ['blur', 'change']
  52. },
  53. },
  54. };
  55. },
  56. onReady() {
  57. //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
  58. this.$refs.form1.setRules(this.rules)
  59. },
  60. methods: {
  61. submit() {
  62. this.$refs.form1.validate().then(res => {
  63. if(this.model1.userInfo.mewpasswoed1!=this.model1.userInfo.mewpasswoed2){
  64. uni.$u.toast('您的新密码不一致,请重新输入')
  65. }else{
  66. uni.$u.toast('校验通过')
  67. }
  68. }).catch(errors => {
  69. uni.$u.toast('校验失败')
  70. })
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss">
  76. .tijiao {
  77. margin-top: 50rpx;
  78. padding-bottom: 30rpx;
  79. }
  80. .xgmy{
  81. padding: 20rpx;
  82. }
  83. .OutermostLayer h4 {
  84. font-size: 35rpx;
  85. margin-bottom: 10rpx;
  86. padding-top: 20rpx;
  87. text-align: center;
  88. }
  89. </style>