密码复杂度验证

element-ui实现密码复杂度验证

利用element-ui组件中的表单时 里面el-form中的rules属性，rules属性定义的是存放多个验证规则的数组formRules
在el-input标签内，设置一个v-model双向数据绑定，以及其他的属性等。:model是绑定属性，置空

demo

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

data

     //插入验证规则
       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" },
        ],
      },