Changepassword.vue 2.2 KB

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