element-ui实现密码复杂度验证-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui实现密码复杂度验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、el-form中的rules属性，rules属性定义的是存放多个验证规则的数组formRules（这个数组是个人起的名字），el-form-item中的prop属性，对应的是formRules数组中的对应的规则名称，然后在el-input标签内，设置一个v-model双向数据绑定，以及其他的属性等。:model是绑定属性，置空

在规则对象数组（formRules）中，可以定义具体的规则包括如下：

trigger: 'blur'（失去焦点触发验证）/'change'（实时触发校验规则），

validator：自己加的较为复杂的验证的规则的名称，

required：true(必填)/false(非必填)。

message：不符合验证规则时候，向用户的提示信息。

pattern: 用来验证正则的属性

2、在element ui表单中有rules属性，绑定相关验证规则

写在form表单总的标签上面（el-form），不是写在子标签（el-form-item）里面

<el-form ref="loginForm" :model="loginForm" :rules="loginRules">

3、插入验证规则

     //插入
       loginRules: {
        username: [。。此处略去。。],
        password: [   
//在rule内可以插入多组数组来验证用户名、密码等，数组内可以插入多个对象，同时起作用      
          {
            required: true,
            trigger: "blur",
            message: "密码不能为空",
          },
          {
              //插入正则验证：大小写、数字、至少8位、不常用字符
            pattern:
              /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-])[A-Za-z\d$@#!%^*?&+-]{8,}/,
            message: "密码应当至少8位且含有数字、大小写字母及特殊字符",
           },
                    
         
          //rule中插入比较复杂的验证方法
          { validator: checkPassword, trigger: "blur" },
        ],
        code: [。。此处略去。。]
      },

4、为新插入的较复杂的验证规则添加定义，此处的验证规则是密码不能出现键盘上的连续三个及三个以上字符

正常情况下验证规则写在element-ui官网给的例子所写的位置即可。但是我的写了没效果，写在export default前面，import from后面才有效。

import。。。from。。。
此处略去

// 键盘三个连续字符(包括三个连续数字)的匹配(横向、大小写、shift)
//rule是验证规则；value是传过来的值；callback是针对不同结果返回函数的名称，内部书写的是返回的结果。
//回调函数callback()（返回callback的入参为空代表校验通过规则，返回含new Error（‘自定义提示’）入参代表校验不通过规则。）
//保证自定义校验规则的每个分支都调用了callback方法，否则会导致el-form组件的validate方法无法进入回调函数。

const checkPassword = (rule, value, callback) => {
  var s_1_1 = "`1234567890-=";
  var s_1_2 = "qwertyuiop[]\\";
  var s_1_3 = "asdfghjkl;'";
  var s_1_4 = "zxcvbnm,./";
  var s_2_1 = "`1234567890-=";
  var s_2_2 = "QWERTYUIOP[]\\";
  var s_2_3 = "ASDFGHJKL;'";
  var s_2_4 = "ZXCVBNM,./";
  var s_3_1 = "~!@#$%^&*()_+";
  var s_3_2 = "QWERTYUIOP{}|";
  var s_3_3 = 'ASDFGHJKL:"';
  var s_3_4 = "ZXCVBNM<>?";
  var boolean = true;

  for (var n = 0; n < value.length - 2; n++) {
    var char = value[n] + value[n + 1] + value[n + 2];
    if (
      s_1_1.indexOf(char) >= 0 ||
      s_1_2.indexOf(char) >= 0 ||
      s_1_3.indexOf(char) >= 0 ||
      s_1_4.indexOf(char) >= 0 ||
      s_2_1.indexOf(char) >= 0 ||
      s_2_2.indexOf(char) >= 0 ||
      s_2_3.indexOf(char) >= 0 ||
      s_2_4.indexOf(char) >= 0 ||
      s_3_1.indexOf(char) >= 0 ||
      s_3_2.indexOf(char) >= 0 ||
      s_3_3.indexOf(char) >= 0 ||
      s_3_4.indexOf(char) >= 0
    ) {
      boolean = false;
      break;
    }
  }
  console.log(boolean);
  if (boolean == true) {
    callback();
  }
  callback(new Error("密码中键盘顺序字符不得超过三个,请重新输入"));
};

export default {。。。。。。}

5、假如项目里面需要一种比较狗的需求：用admin管理员身份登录不需要验证复杂的验证规则或者其它规则，而非管理员用户登录需要使用这一套规则，那么使用以下代码设置一个筛选条件即可。

判断如果用户名是admin的话就不再执行该判断。
const confirm = (rule, value, ok) => {
    const regex4 =
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/;
  if (regex4.test(value)) {
    return ok();
  } else if (loginForm.username != "admin" && regex4.test(value) == false) {
    ok(new Error("密码应该是数字、大小写字母、特殊字符的8位组合,请重新输入！"));
  }
};

假如有错误，还请大神雅正。文章来源地址https://www.toymoban.com/news/detail-465929.html

到了这里，关于element-ui实现密码复杂度验证的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！