密码复杂度验证

最新推荐文章于 2024-07-08 18:12:22 发布

秦悸

最新推荐文章于 2024-07-08 18:12:22 发布

阅读量529

点赞数

分类专栏： vue 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/GikQxx21_wen/article/details/127618608

版权

vue 专栏收录该内容

29 篇文章

订阅专栏

博客介绍了利用Element-UI组件实现密码复杂度验证的方法。通过el-form中的rules属性定义规则，在el-input标签内设置v-model双向数据绑定及其他属性，还提及了demo和data相关内容。

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

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" },
        ],
      },