首先建立form表單介面,需要包括使用者登入名,原密碼,新密碼,確認密碼

如圖:

程式碼如下:

  <Form :model="formItem" :rules="formItemRules"
                  :label-width="100">
              <FormItem label="登入名" prop="userName">
                <Input :disabled="formItem.userId?true:false" v-model="formItem.userName"
                       placeholder
 
="請輸入內容"></Input>
              </FormItem>
              <FormItem label="登入密碼" prop="oldPassword">
                <Input type="password" v-model="formItem.oldPassword" placeholder="請輸入內容"></Input>
              </FormItem>
              <FormItem label="登入密碼"
 
 prop="password">
                <Input type="password" v-model="formItem.password" placeholder="請輸入內容"></Input>
              </FormItem>
              <FormItem label="確認密碼" prop="passwordConfirm">
                <Input type="password" v-model="formItem.passwordConfirm"
 
 placeholder="請輸入內容"></Input>
              </FormItem>
            </Form>
<Button type="default" @click="handleReset">取消</Button>&nbsp;
<Button type="primary" @click="handleSubmit" :loading="saving">儲存</Button>

接下來時script程式碼:

需要再data中定義一下formItem,以及對應的規則

formItem包括:

    data(){
     const validateOldPassword = (rule, value, callback) =>
        {
            const userId = this.formItem.userId
            checkPassword({userId:userId,oldPassword:value}).then(result => {
                if(!result.data())
                {
                    callback(new Error('原始密碼錯誤'))
                }
            })

        }
      const validateEn = (rule, value, callback) => {
        let reg = /^[_a-zA-Z0-9]+$/
        let reg2 = /^.{4,18}$/
        // 長度為6到18個字元
        if (value === '') {
          callback(new Error('登入名不能為空'))
        } else if (value !== '' && !reg.test(value)) {
          callback(new Error('只允許字母、數字、下劃線'))
        } else if (value !== '' && !reg2.test(value)) {
          callback(new Error('長度6到18個字元'))
        } else {
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        let reg2 = /^.{6,18}$/
        if (value === '') {
          callback(new Error('請輸入密碼'))
        } else if (value !== this.formItem.password) {
          callback(new Error('兩次輸入密碼不一致'))
        } else if (value !== '' && !reg2.test(value)) {
          callback(new Error('長度6到18個字元'))
        } else {
          callback()
        }
      }

      const validatePassConfirm = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請再次輸入密碼'))
        } else if (value !== this.formItem.password) {
          callback(new Error('兩次輸入密碼不一致'))
        } else {
          callback()
        }
      }
    return{
    formItem: {
          userId: '',
          userName: '',
          password: '',
          oldPassword:'',
          passwordConfirm: '',
         
        },
        formItemRules: {
          userName: [
            {required: true, message: '登入名不能為空', trigger: 'blur'},
            {required: true, validator: validateEn, trigger: 'blur'}
          ],
            oldPassword: [
                {required: true, validator: validateOldPassword, trigger: 'blur'}
            ],
          password: [
            {required: true, validator: validatePass, trigger: 'blur'}
          ],
          passwordConfirm: [
            {required: true, validator: validatePassConfirm, trigger: 'blur'}
          ],
         
        },
}
}

在規則過程中用到了一個後臺介面用於驗證使用者輸入的原始密碼是否正確 

/**
 * 檢查原始密碼
 * @param userId
 * @param oldPassword
 */
export const checkPassword = ({userId,oldPassword}) => {
  const data = {
    userId,
    oldPassword
  }
  return request({
    url: 'user/check/password',
    data,
    method: 'post'
  })
}

接下來就是最主要的一步了,待所有規則符合之後,進行密碼的修改

js程式碼:

/**
 * 修改密碼
 * @param userId
 * @param oldPassword
 * @param newPassword
 */
export const updatePassword = ({ userId, password }) => {
  const data = {
    userId: userId,
    password: password
  }
  return request({
    url: 'base/user/update/password',
    data,
    method: 'post'
  })
}

呼叫handleSubmit呼叫修改密碼介面,進行密碼的修改

    handleSubmit() {          
 　　　　　　　　updatePassword({
                userId: this.formItem.userId,
                password: this.formItem.password
              }).then(res => {
                if (res.code === 0) {
                  this.$Message.success('修改成功')
                  this.handleReset()
                }
                this.handleSearch()
              })
}