vue3.0+element-puls 正则验证

最新推荐文章于 2024-04-04 23:19:00 发布

宝码12

最新推荐文章于 2024-04-04 23:19:00 发布

阅读量690

点赞数

分类专栏： vue 文章标签： javascript ecmascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45293165/article/details/130825760

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1手机号验证，验证码，密码，话不多说上代码

js


// 手机号验证规则
const validatePhon = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入绑定的手机号码'))
  } else if (!/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(value)) {
    callback(new Error("请输入正确的手机号码"))
  } else {
    callback()
  }
}



// 验证码
const validateCode = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入验证码!'))
  } else if (!/^[0-9]+$/.test(value) || !/^\d{6}$/.test(value)) {
    callback(new Error("请输入6位数字的验证码"))
  }
  callback()
}

//密码
const validatePass = (rule, value, callback) => {
  var reg =/^(?=.*[a-z])(?=.*\d)[^]{8,16}$/; //密码必须是8位以上、必须含有字母、数字
  if (value === '') {
    console.log(getListpass.confirmpass, "jdjsd")
    callback(new Error('请输入密码!'))
  } else if (!reg.test(value)) {
    callback(new Error("验证 8-18位字符密码由字母和数字组合"))
  }
  callback()
}

//新密码
const confirmPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value != getListpass.confirmpass) {
    callback(new Error("两次密码不一致，请重新输入"))
  }
  callback()
}

const rules = reactive({
  phone: [{ validator: validatePhon, trigger: 'blur', },
  { pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  code: [{ validator: validateCode, trigger: 'blur', required: true }],
  password: [{ validator: validatePass, trigger: 'blur', required: true }],
  confirmpass: [{ validator: confirmPass, trigger: 'blur', required: true }]
})
// 提交按钮
const SubmitFun = (formEl) => {
  let obj = { "tel": getListpass.phone, "smsCode": getListpass.code, "passwd": getListpass.password }
  if (!formEl) return
  formEl.validate((valid, fields) => {
    formEl.clearValidate('phone', 'code')
    if (valid) {
      openLoading();
      service.post('/zwow_web/callComponent/yl.userRePwdBySms/doRePwd', obj).then(res => {
        closeLoading()
        if (res.data.code == "0") {
          // 显示修改成功
          showSucceed.value = true
          if (active.value++ > 2) active.value = 0
          console.log(res, "成功")
        } else {
          ElMessage.error(res.data.msg)
        }
      }).catch(err => {
        ElMessage.error(res.data.msg)
        console.log(err)
      })
    } else {
      return false
    }
  })
}

html代码

<template>
  <div class="container">
    <div class="slideShadow" v-if="showSlide">
      <ImgChecks @success="success" @fail="fail"></ImgChecks>
    </div>
    <div class="forgetpass">
      <div class="forgetpass-box">
        <h4>找回密码</h4>
        <div class="PaddStep">
          <div class="theSteps">
            <el-steps :active="active" finish-status="success">
              <el-step title="验证账号" />
              <el-step title="重置密码" />
              <el-step title="重新登录" />
            </el-steps>
          </div>

          <div class="formPhon" v-if="!showSucceed">
            <el-form ref="ruleFormRef" :size="size" :rules="rules" :model="getListpass" label-width="auto"
              class="demo-ruleForm">

              <el-form-item label="+86 |" class="last-phon" v-if="!getshowPass" prop="phone">

                <!-- <span class="last-phon">+86</span> -->
                <el-input v-model="getListpass.phone" type="text" placeholder="请输入手机号"
                  class="input-border-style style-phon" />
              </el-form-item>


              <el-form-item label="您的手机号" v-if="getshowPass">
                <p class="not-phone">{{ getListpass.phone }}</p>
              </el-form-item>

              <el-form-item label="验证码" v-if="getshowPass" prop="code">
                <el-input v-model="getListpass.code" type="text" placeholder="请输入验证码" class="input-border-style" />
                <div class="code">
                  <span class="get-code" v-if="!sendMsgDisabled" @click="getCodes">获取验证码</span>
                  <span class="get-code" v-if="sendMsgDisabled">{{ time + '秒后获取' }}</span>
                </div>
              </el-form-item>

              <el-form-item label="新密码" v-if="getshowPass" prop="password">
                <el-input v-model="getListpass.password" type="password" show-password
                  placeholder="新密码（8~18位字符，密码由字母+数字组合）" class="input-border-style" autocomplete="off" />

              </el-form-item>

              <el-form-item label="确认密码" v-if="getshowPass" prop="confirmpass">
                <el-input v-model="getListpass.confirmpass" type="password" show-password placeholder="请再次确认密码"
                  class="input-border-style" />
              </el-form-item>

              <el-form-item v-if="getshowPass">
                <el-button type="primary" @click="SubmitFun(ruleFormRef)" class="submit">提交</el-button>
              </el-form-item>

              <el-form-item v-if="!getshowPass">
                <el-button type="primary" @click="next(ruleFormRef)" class="next">下一步</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 找回密码第三步 -->
          <div class="retrieve" v-if="showSucceed">
            <div class="succeed-pic">
              <img src="../../../assets/login/succeedpic.png" alt="成功">
            </div>
            <div class="succeed-text">恭喜你重新设置成功</div>
            <div class="succeed-but">
              <router-link to="/homelogin/Login">重新登录</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>