vue校验密码的三种写法

一、在el-form（element ui中的form表单）中使用:rules=“rules” 实现

1.在项目的src/utils文件夹下创建validate.js文件

validate.js文件中内容为：

/**
 * @param value
 * 测试密码是否满足条件，包括四种类型
 */
 export function validPassword(value) {
  const num = /^.*[0-9]+.*/
  const low = /^.*[a-z]+.*/
  const up = /^.*[A-Z]+.*/
  const spe = /^.*[^a-zA-Z0-9]+.*/
  const passLength = value.length > 5 && value.length < 21
  return num.test(value) && low.test(value) && up.test(value) && spe.test(value) && passLength
}

2.在需要校验密码的vue文件内import引入validate.js中的validPassword函数

import { validPassword } from '@/utils/validate'

3.在需要校验密码的vue文件中的data定义校验函数，调用validPassword 函数

const validatePassword = (rule, value, callback) => {
      if (validPassword(value)) callback()
      else callback(new Error('密码6-20位，必须包含大写字母，小写字母，数字及特殊字符'))
    }

4.在需要校验密码的vue文件中的form表单中写:rules=“rules”

5.在rules中通过validator: validatePassword使用自定义校验规则

password: [
          { required: true, trigger: "blur",validator: validatePassword},
        ],

二、使用this.$prompt实现

 /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.*(?=.{6,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/,
        inputErrorMessage: "'密码6-20位，必须包含大写字母，小写字母，数字及特殊字符'",
      }).then(({ value }) => {
          resetUserPwd(row.userId, value).then(response => {
            this.msgSuccess("修改成功，新密码是：" + value);
          });
        }).catch(() => {});
    },

prompt() 弹出个输入框

三、a-input（ant-design-vue）中使用

前两步同一

 <a-input
          placeholder="请输入新密码"
          type="password"
          v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'},{
            validator: validateToNextPassword,
          },]}]" />

validateToNextPassword (rule, value, callback) {
        if (validPassword(value)) callback()
        else callback(new Error('密码8-20位，必须包含大写字母，小写字母，数字及特殊字符'))
      }