【前端】表单密码格式—校验。

如图:实现表单输入密码和确认密码的时候进行表单校验。

实现方式:

1.在代码的data里面定义,函数验证的方法。如图所示,代码如下

【代码】如下:

javascript 复制代码
 const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        let yz = 0;
        this.passwordPercent = 0;
        //6-20位包含字符、数字和特殊字符
        if (this.form1.newPassword.length < 11) {
          callback(new Error("长度在 11 到 20 个字符"));
        }
        if (this.form1.newPassword.match(/([a-z])+/)) {
          yz++;
        }
        if (this.form1.newPassword.match(/([0-9])+/)) {
          yz++;
        }
        if (this.form1.newPassword.match(/([A-Z])+/)) {
          yz++;

        }
        if (this.form1.newPassword.match(/([\W_])+/)) {
          yz++;
        }
        if (yz < 2) {
          callback(new Error("密码必须是大小写字母、数字、特殊符号两种及以上组成"));
        }
        switch (yz) {
          case 0: this.passwordPercent = 0; callback();
          case 1: this.passwordPercent = 25; callback();
          case 2: this.passwordPercent = 50; callback();
          case 3: this.passwordPercent = 75; callback();
          case 4: this.passwordPercent = 100; callback();
        }
      }
    };
    const equalToPassword = (rule, value, callback) => {
      if (this.form1.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };

2.设置表单校验的rule。 rule在return函数里面。名称可以自己定义。作为变量使用。

javascript 复制代码
rules1: {
        selectApps: [{ required: true, message: "请选择应用系统", trigger: "blur" }],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 8, max: 20, validator: validatePassword, trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      },

3.给表单添加rule。 则表单输入会按照规则进行校验。:rules="rules1"

rules1就是步骤二定义的规则

javascript 复制代码
 <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px" v-if="radio == 1">
 </el-form>
相关推荐
abigale0312 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者31 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile35 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399738 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊43 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火43 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能