vue2+element-ui可进行输入或者点击随机密码生成,密码格式:字母+数字+特殊符号,限制6位以上。

            <el-form-item prop="password"
                          label="登录密码">
              <el-col :span="23">
                <span style="display: flex;justify-content: space-between;">
                  <el-input v-model="dataForm.password"
                            placeholder="请输入">
                    <!-- @input="validatePassword" -->
                  </el-input>
                  <el-button @click="generateAndFillPassword"
                             size="small">随机密码</el-button>
                </span>
                <p v-if="errorMessage">{{ errorMessage }}</p>
              </el-col>
            </el-form-item>
<script>
export default {
  data () {
    let passwords = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6 || value.length > 16) {
        callback(new Error('请输入6-16位,包括大写字母,小写字母,数字,特殊字符'))
      } else {
        // let pPattern = /^.*(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{6,16}/
        let pPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()`\-_=+{};:,<.>]).{6,16}$/
        // let order = 0 // 顺序
        console.log(pPattern.test(value), 99)
        if (pPattern.test(value)) {
          callback()
        } else {
          callback(new Error('请输入6-16位,包括大写字母,小写字母,数字,特殊字符'))
        }
      }
    }
    return {
      dataForm: {
        password: '' // 登录密码
      },
      errorMessage: '',
      passwordLength: 6,
      dataRule: {
        password: [
          { required: true, validator: passwords, trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    // 在 Input 值改变时触发验证
    validatePassword () {
      // Password validation regex
      // (?=.*[a-zA-Z]) 表示要有小写与大写字母
      // (?=.*\d) 表示要有数字
      const regex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*`()\-_=+{};:,<.>]).{6,16}$/
      // console.log()
      if (this.dataForm.password.length < 6 || this.dataForm.password.length > 16) {
        // console.log('密码必须介于6到8个字符之间')
        this.errorMessage = '密码必须介于6到16个字符之间'
        // this.errorMessage = 'Password must be between 6 and 8 characters.'
        return
      }
      console.log(regex.test, 'test', regex.test(this.dataForm.password), '!www', !regex.test(this.dataForm.password))
      if (!regex.test(this.dataForm.password)) {
        this.errorMessage = '密码必须至少包含一个字母、一个数字和一个特殊字符。'
        // this.errorMessage = 'Password must contain at least one letter, one number, and one special character.'
        // console.log('密码必须至少包含一个字母、一个数字和一个特殊字符。')
        return
      }
      // Reset error message
      this.errorMessage = ''
    },
    // 随机密码
    generateAndFillPassword () {
      this.dataForm.password = this.generateRandomPassword(this.passwordLength)
    },
    generateRandomPassword (length) {
      // const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]}:;?><,./-='
      const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&`*()-_=+{};:,<.>'
      let password = ''
      for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length)
        password += chars[randomIndex]
      }
      return password
    },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值