密码验证只包含字母数字

最新推荐文章于 2024-05-29 17:33:04 发布

原创最新推荐文章于 2024-05-29 17:33:04 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #密码验证

本文介绍如何在Vue.js应用中创建一个密码验证规则，确保密码仅包含8~10位数字和字母，且不得包含特殊字符或下划线。参照Element UI的表单验证文档，提供了一种实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

密码由8~10位数字、字母组成，不能包含特殊字符和下划线

<template>
  <div class="changePwd-container">
    <div class="dialogBlock">
      <div class="dialogTitle">修改密码</div>
      <div class="dialogBody">
        <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
          <div class="tip_one">当前您使用的密码不安全，请立即更换密码。</div>
          <div class="tip_two">注：密码8-10位数字，字母组合</div>
          <el-form-item label="新密码" prop="newPwd">
            <el-input v-model.trim="ruleForm.newPwd" autocomplete="off" class="newpwd" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input v-model.trim="ruleForm.confirmPwd" autocomplete="off" class="confirmPwd" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="submitForm('ruleForm')">修 改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

密码校验，判断不能为特殊字符，不能包含下划线,可参考 https://element.eleme.cn/#/zh-CN/component/form 文档里的form表单验证

 data() {
    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？_]")
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.confirmPwd !== '') {
          this.$refs.ruleForm.validateField('confirmPwd')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validatePassLetter = (rule, value, callback) => {
      if (value) {
        if (pattern.test(value)) {
          pattern.lastIndex = -1
          return callback(new Error('密码中不能存在特殊字符或下划线'))
        } else if (this.isDigit(value)) {
          callback(new Error('密码须包含字母'))
        } else if (this.isLetter(value)) {
          callback(new Error('密码须包含数字'))
        } else {
          callback()
        }
      }
    }
    return {
      dialogFormVisible: true,
      formLabelWidth: '120px',
      ruleForm: {
        newPwd: '',
        confirmPwd: ''
      },
      rules: {
        newPwd: [
          { validator: validatePass, trigger: 'blur' },
          { min: 8, max: 10, message: '长度在 8 到 10 个字符', trigger: 'blur' },
          { validator: validatePassLetter, trigger: 'blur' }
        ],
        confirmPwd: [
          { validator: validatePass2, trigger: 'blur' },
          { min: 8, max: 10, message: '长度在 8 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },

方法

    //判断是否全为数字
    isDigit(s) {
      const patrn = /^[0-9]{8,10}$/
      if (!patrn.exec(s)) { return false }
      return true
    },
    //判断是否全为字母
    isLetter(s) {
      const patrn = /^[a-zA-Z]{8,10}$/
      if (!patrn.exec(s)) { return false }
      return true
    },