elementUI form表单完成密码修改页面

最新推荐文章于 2024-05-07 15:36:59 发布
温瞳'H
最新推荐文章于 2024-05-07 15:36:59 发布
阅读量561
点赞数
分类专栏： js 文章标签： elementui javascript vue.js
本文链接：https://blog.csdn.net/weixin_45322772/article/details/128590818
版权
js 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
elementUI form表单完成密码修改页面

<template>
  <div>
    <el-row>
      <el-col :span="6">&nbsp;</el-col>
      <el-col :span="8">
        <h4 type="success" effect="dark" style="margin: 20px 150px;">短信设置密码</h4>
        <el-form ref="form" :rules="rules" :model="form" label-width="150px">
          <el-form-item label="手机号码" required prop="phone">
            <el-col :span="18">
              <el-input style="position: fixed;bottom: -99999px" maxlength="11" type="text" />
              <el-input v-model="form.phone" maxlength="11" type="text" placeholder="请输入手机号" @input="oninputphone('form')" />
            </el-col>
<!--            <el-col v-if="istrue" :span="5" style="margin-left: 10px;color: red"><i class="el-icon-warning" style="margin-right: 5px" />{{ phonemsg }}</el-col>-->
<!--            <el-col v-else :span="5" style="margin-left: 10px;color: green"><i class="el-icon-success" style="margin-right: 5px" />{{ phonemsg }}</el-col>-->
          </el-form-item>
          <el-form-item label="验证码" required prop="smscodes">
            <el-row>
              <el-col :span="12">
                <el-input v-model="form.smscodes" type="text" placeholder="请输入验证码" @input="oninputsms" />
                <el-input style="position: fixed;bottom: -99999px" type="text" />
              </el-col>
              <el-col :span="6" style="margin-left: 10px">
                <el-button v-if="show" type="primary" @click="getsmscodeone">获取验证码</el-button>
                <el-button v-else style="width: 112px;">{{ count }}</el-button>
              </el-col>
<!--              <el-col v-if="false" :span="5" style="color: red"><i class="el-icon-warning" style="margin-right: 5px" />请输入验证码</el-col>-->
<!--              <el-col v-else :span="5" style="color: green"><i class="el-icon-success" style="margin-right: 5px" /></el-col>-->
            </el-row>
          </el-form-item>
          <el-form-item label="设置新密码" required prop="password">
            <el-col :span="18">
              <el-input style="position: fixed;bottom: -99999px" type="password" />
              <el-input v-model="form.password" type="text" autocomplete="off" placeholder="请输入新密码" show-password @keyup.enter.native="oninputpassword" />
            </el-col>
<!--            <el-col v-if="false" :span="5" style="margin-left: 10px;color: red"><i class="el-icon-warning" style="margin-right: 5px" />请输入新密码</el-col>-->
<!--            <el-col v-else :span="5" style="margin-left: 10px;color: green"><i class="el-icon-success" style="margin-right: 5px" /></el-col>-->
          </el-form-item>
          <el-form-item label="再次的输入新密码" required prop="newpassword">
            <el-col :span="18">
              <el-input v-model="form.newpassword" type="text" autocomplete="off" placeholder="请再次输入新密码" show-password @keyup.enter.native="oninputnewpassword" />
            </el-col>
<!--            <el-col v-if="false" :span="5" style="margin-left: 10px;color: red"><i class="el-icon-warning" style="margin-right: 5px" />请再次输入新密码</el-col>-->
<!--            <el-col v-else :span="5" style="margin-left: 10px;color: green"><i class="el-icon-success" style="margin-right: 5px" /></el-col>-->
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="oninputPassWord('form')">确认修改</el-button>
            <el-button type="primary" @click="tologin">返回登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { selectphone, getsmscode, verification } from '@/api/chengepasswore/passwore'
import md5 from 'js-md5'
export default {
  name: 'SetUrl',
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.newpassword !== '') {
          this.$refs.form.validateField('newpassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      istrue: false, // 电话号码验证是否成功
      phonemsg: '', // 电话号码的提示
      count: '', // 短信验证倒计时
      show: true,
      form: {
        phone: '', // 带过来的号码
        smscodes: '', // 验证码
        password: '', // 新密码
        newpassword: '' // 再次新密码
      },
      rules: {
        smscodes: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: checkPhone, trigger: 'change' },
          { max: 11, message: '手机号长度为11位，以13/14/15/16/17/18/19开头', trigger: 'change' }
        ],
        password: [
          { min: 7, max: 16, message: '请输入7-16位密码，包含数字和字母，字母区分大小写', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newpassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    //	获取当前登录的用户信息
    const users = sessionStorage.getItem('factoryMsg')
    this.form.phone = JSON.parse(users).phone
    console.log(JSON.parse(users))
  },
  methods: {
    // 直接登录
    async tologin() {
      await this.$store.dispatch('user/logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$router.push(`/login`)
    },
    // 确认修改
    oninputPassWord(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log('error submit!!', valid, this.form)
          verification({ value: { phone: this.form.phone, code: this.form.smscodes, password: md5(this.form.password) }}).then(res => {
            this.$message.success(res.msg)
            this.$router.push(`/login`)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 手机号
    oninputphone(form) {
      this.$refs[form].validate(async(valid) => {
        if (valid) {
          selectphone({ value: { phone: this.form.phone }}).then(res => {
            if (res.code === 1) {
              this.phonemsg = res.msg
              this.istrue = true
            }
            if (res.code === 0) {
              this.phonemsg = res.msg
              this.istrue = false
            }
          }).catch(e => {
            console.log(e)
          })
          // try {
          //   const res = await selectphone({ value: { phone: this.form.phone }})
          //   this.phonemsg = res.msg
          //   if (res.code === 1) {
          //     this.istrue = true
          //   } else {
          //     this.istrue = false
          //   }
          // } catch (e) {
          //   console.log(e)
          // }
          console.log('正确!', this.form.phone)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击获取验证码
    getsmscodeone() {
      const TIME_COUNT = 60
      getsmscode({ value: { phone: this.form.phone }}).then(res => {
        if (res.code === 1) {
          this.phonemsg = res.msg
          this.istrue = true
        }
      }).catch(e => {
        console.log(e)
      })
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    // 验证码
    oninputsms(val) {
      const reg = /[^\d]/g
      const str = reg.test(val)
      console.log('正确!', this.form.phone)
    },
    //  设置密码
    oninputpassword() {

    },
    //  设置新密码
    oninputnewpassword() {

    }
  }
}
</script>

<style scoped>

</style>