使用vue使用form表单实现修改密码

首先建立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()
              })
}

 下一篇文章即记录了修改密码所用到的后台