修改el-form制作自定义元素登录框

已于 2022-09-12 16:45:03 修改
阅读量2.1k 收藏 3
点赞数
文章标签： css css3 javascript
于 2022-03-14 22:53:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anonymous996/article/details/123490725
版权
最近看到react 和vuetify 的输入框聚焦文字会变小上移，觉得它们框架有的效果，element你也应该有，于是乎，就尝试修改，试了很久发现 el-form-item 中的label和input根本连不上关系，就想到了一个解决办法，那就是el-input中有个自定义的slot属性，借此属性得以实现效果。

下面就是文档的属性。
在这里插入图片描述
这是最终效果图。截图的颜色不好看，有条件的自己修改一下样式即可。
在这里插入图片描述

代码有点套娃，有条件的可以使用slot去进行二次封装。
  <template>
  <div class="login">
    <el-form ref="form" :model="form" :rules="rules" class="login-form" auto-complete="off">

      <el-form-item prop="username">
        <el-input v-model="form.username" type="text" @keyup.enter.native="handleLogin" required clearable>
          <span slot="prefix" class="wrap">
            <i class="el-input__icon el-icon-user-solid" />
            <span>名称</span>
          </span>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input v-model="form.password" type="password" @keyup.enter.native="handleLogin" required clearable>
          <span slot="prefix" class="wrap">
            <i class="el-input__icon el-icon-lock" />
            <span>密码</span>
          </span>
        </el-input>
      </el-form-item>

      <el-form-item prop="captcha">

        <div class="flex justify-around">

          <el-input class="w--55%" v-model="form.captcha" placeholder="验证码" @keyup.enter.native="submit">
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>

          <div class="login-code w--40%">
            <canvas ref="captcha" width="100%" height="38px" @click="captcha('captcha')" />
          </div>

        </div>

      </el-form-item>

      <el-checkbox v-model="form.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="submit">
          {{ loading ? "登 录 中..." : "登 录" }}
        </el-button>

        <div style="float: right" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>

      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
    </div>

  </div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { mapActions } from 'pinia';
import { user } from '@/pinia';
export default {
  name: "Login",
  data() {
    const validator = (rule, value, callback) => {
      if (value !== this.captchaCode) return callback(new Error(rule.message))
      callback();
    };
    return {
      form: {
        username: "admin",
        password: "123456",
        captcha: "",
        rememberMe: false,
        uuid: "ccf0a46bfcf9409b95e9aea8700c9ed7",
      },
      rules: {
        username: [{ required: true, trigger: "blur", message: "请输入账号" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
        captcha: [{ required: true, trigger: 'blur', message: "请输入验证码" }, { validator, trigger: 'blur', message: "验证码错误" }],
      },
      captchaCode: '',
      loading: false,
      register: false, // 注册开关
      redirect: undefined,
    };
  },
  mounted() {
    this.getCookie();
    this.captcha('captcha');
  },
  methods: {
    ...mapActions(user, ['login']),
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.form = {
        username: !username ? this.form.username : username,
        password: !password ? this.form.password : decrypt(password),
        rememberMe: !rememberMe ? false : Boolean(rememberMe),
      };
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        this.loading = true;
        if (this.form.rememberMe) {
          Cookies.set("username", this.form.username, { expires: 30 });
          Cookies.set("password", encrypt(this.form.password), { expires: 30 });
          Cookies.set("rememberMe", this.form.rememberMe, { expires: 30 });
        } else {
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove("rememberMe");
        }
        try {
          await this.login(this.form);
          this.$router.push({ path: this.redirect || "/" }).catch(() => { });
        } catch (error) {
          console.error(error);
          this.loading = false;
          this.captcha('captcha');
        }
      });
      this.loading = false;
    },
    // 获取生成验证码的canvas
    captcha(el) {
      const container = {
        scope: (max, min) => parseInt(Math.random() * (max - min) + min),
        color: (max, min, o = 1) => `rgba(${container.scope(max, min)},${container.scope(max, min)},${container.scope(max, min)},${o})`,
        num: (n) => Math.floor(Math.random() * n),
        isnum: (n) => typeof n === 'number' && !isNaN(n),
        operator: ['+', '-', '*'],
        rect: [0, 0, 100, 38],
        calculate: [0, '+-*/', 0, '=?']
      }
      const { scope, color, num, isnum, operator, rect, calculate: calcu } = container;
      const ctx = this.$refs[el].getContext("2d");
      const [x1, y1, x2, y2] = rect;

      ctx.clearRect(x1, y1, x2, y2);
      ctx.fillStyle = color(180, 230);
      ctx.save()
      ctx.fillRect(x1, y1, x2, y2);

      Array.from({ length: 4 }, (_, index) => {
        ctx.beginPath();
        ctx.strokeStyle = color(80, 180, .33);
        ctx.save();
        ctx.moveTo(scope(0, x2), scope(0, y2));
        ctx.moveTo(scope(0, x2), scope(0, y2));
        ctx.lineTo(scope(0, x2), scope(0, y2));
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = color(0, 255, .33);
        ctx.save();
        ctx.arc(scope(0, x2), scope(0, y2), 1, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = `${scope(18, 30)}px Simhei`;
        ctx.fillStyle = color(80, 150);
        ctx.save();
        let item = calcu[index];
        isnum(item) && (item = num(10));
        item === '+-*/' && (item = operator[num(3)]);
        index === 2 && calcu[1] === '-' && calcu[0] <= item && (item = calcu[0] ? calcu[0] : 0);
        calcu[index] = item;
        ctx.translate(22 * index + -12, 10);
        ctx.rotate((scope(-12, 12) * Math.PI) / 180);
        ctx.fillText(item, y2 / 2, y2 / 2);
        ctx.restore();
      });
      const result = eval(calcu.slice(0, calcu.length - 1).join(""));
      this.captchaCode = result.toString();
      return result.toString();
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.login {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100%;
	  background-image: linear-gradient(
	    to right,
	    #00c6fb,
	    #005bea,
	    #00c6fb,
	    #005bea
	  );
	  background-size: cover;
	  .title {
	    margin: 0px auto 30px auto;
	    text-align: center;
	    color: #707070;
	  }
	  .el-form {
	    position: absolute;
	    top: 50%;
	    left: 75%;
	    width: 400px;
	    padding: 40px 40px 40px 40px;
	    transform: translate(-50%, -50%);
	    background: rgba(0, 0, 0, 0.2);
	    box-sizing: border-box;
	    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
	    border-radius: 10px;
	    .el-form-item {
	      margin-bottom: 30px;
	      h2 {
	        text-align: center;
	        color: #c0c4cc;
	      }
	      /deep/ {
	        .el-input__inner {
	          border: none;
	          border-radius: 0;
	          border-bottom: 1px solid #fff;
	          background-color: transparent !important;
	          color: #c0c4cc;
	          // 伪元素的修改 line
	          & + .el-input__prefix::before {
	            content: "";
	            position: absolute;
	            display: block;
	            bottom: 0%;
	            left: 50%;
	            width: 0;
	            height: 2px;
	            background-color: #409eff;
	            transition: all 0.8s;
	          }
	          &:focus + .el-input__prefix::before {
	            left: 0;
	            width: 100%;
	          }
	          // label的修改 文本存在时的显示css
	          &:-webkit-autofill ~ .el-input__prefix > .wrap,
	          &:focus ~ .el-input__prefix > .wrap,
	          &:valid ~ .el-input__prefix > .wrap {
	            color: #fff;
	            display: inline-block;
	            font-size: 14px;
	            transform: perspective(1000px) translate3d(-10px, -24px, -100px);
	            transition: all 0.4s;
	          }
	        }
	        .el-input__prefix {
	          width: 100%;
	          text-align: left;
	          color: #c0c4cc;
	          font-size: 18px;
	          left: 0px;
	          pointer-events: none;
	          transform-style: preserve-3d;
	          & .wrap {
	            transform: perspective(1000px) translate3d(0, 0, 0);
	            transition: all 0.4s;
	          }
	        }
	      }
	    }
	  }
	
	  .el-login-footer {
	    height: 40px;
	    line-height: 40px;
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    text-align: center;
	    color: #fff;
	    font-family: Arial;
	    font-size: 12px;
	    letter-spacing: 1px;
	  }
	}
</style>

<style lang="scss">
	input:-webkit-autofill,
	textarea:-webkit-autofill,
	select:-webkit-autofill {
	  -webkit-text-fill-color: #ededed !important; //字体颜色
	  background-color: transparent;
	  background-image: none;
	  transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
	}
</style>


<style lang="scss">
$num: 0; // padding、margin
@while $num <= 60 {
  .p-#{$num} {
    padding: #{$num}px !important;
  }
  .pt-#{$num} {
    padding-top: #{$num}px !important;
  }
  .pb-#{$num} {
    padding-bottom: #{$num}px !important;
  }
  .pl-#{$num} {
    padding-left: #{$num}px !important;
  }
  .pr-#{$num} {
    padding-right: #{$num}px !important;
  }
  .px-#{$num} {
    padding-left: #{$num}px !important;
    padding-right: #{$num}px !important;
  }
  .py-#{$num} {
    padding-top: #{$num}px !important;
    padding-bottom: #{$num}px !important;
  }
  .m-#{$num} {
    margin: #{$num}px !important;
  }
  .mt-#{$num} {
    margin-top: #{$num}px !important;
  }
  .mb-#{$num} {
    margin-bottom: #{$num}px !important;
  }
  .ml-#{$num} {
    margin-left: #{$num}px !important;
  }
  .mr-#{$num} {
    margin-right: #{$num}px !important;
  }
  .mx-#{$num} {
    margin-left: #{$num}px !important;
    margin-right: #{$num}px !important;
  }
  .my-#{$num} {
    margin-top: #{$num}px !important;
    margin-bottom: #{$num}px !important;
  }
  $num: $num + 5;
}
$pos: -20; // top、left、right、bottom
@while $pos <= 20 {
  .top-#{$pos} {
    top: #{$pos}px !important;
  }
  .bottom-#{$pos} {
    bottom: #{$pos}px !important;
  }
  .left-#{$pos} {
    left: #{$pos}px !important;
  }
  .right-#{$pos} {
    right: #{$pos}px !important;
  }
  $pos: $pos + 5;
}
$spacing: 0; // width-px、height-px
@while $spacing <= 100 {
  .w--#{$spacing} {
    width: #{$spacing}px !important;
  }
  .h--#{$spacing} {
    height: #{$spacing}px !important;
  }
  $spacing: $spacing + 5;
}
$percentage: 0; // width-%、height-%
@while $percentage <= 100 {
  .w--#{$percentage}\% {
    width: #{$percentage + "%"} !important;
  }
  .h--#{$percentage}\% {
    height: #{$percentage + "%"} !important;
  }
  $percentage: $percentage + 5;
}
.w--unset {
  width: unset !important;
}
.font-style {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
html,
body {
  height: 100% !important;
}
.fr {
  float: right !important;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.fl {
  float: right !important;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.text-xs {
  font-size: 12px;
}
.text-sm {
  font-size: 14px;
}
.text-base {
  font-size: 16px;
}
.text-lg {
  font-size: 18px;
}
.text-xl {
  font-size: 20px;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.select-none {
  user-select: none !important;
}
.w-full {
  width: 100% !important;
}
.h-full {
  height: 100% !important;
}
.relative {
  position: relative !important;
}
.absolute {
  position: absolute !important;
}
.fixed {
  position: fixed !important;
}
.flex {
  display: flex !important;
}
.inline-block {
  display: inline-block !important;
}
.hidden {
  display: none !important;
}
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-row {
  flex-direction: row !important;
}
.justify-center {
  justify-content: center !important;
}
.self-center {
  align-self: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.justify-around {
  justify-content: space-around !important;
}
.justify-evenly {
  justify-content: space-evenly !important;
}
.items-baseline {
  align-items: baseline !important;
}
.items-center {
  align-items: center !important;
}
.items-stretch {
  align-items: stretch !important;
}
.align-top {
  vertical-align: top !important;
}
.align-middle {
  vertical-align: middle !important;
}
.align-bottom {
  vertical-align: bottom !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-y {
  overflow-y: scroll !important;
}
.overflow-x {
  overflow-x: scroll !important;
}
.rounded-none {
  border-radius: 0 !important;
}
.rounded-sm {
  border-radius: 2px !important;
}
.rounded {
  border-radius: 4px !important;
}
.rounded-md {
  border-radius: 6px !important;
}
.rounded-lg {
  border-radius: 8px !important;
}
.rounded-xl {
  border-radius: 12px !important;
}
.rounded-2xl {
  border-radius: 16px !important;
}
.rounded-3xl {
  border-radius: 24px !important;
}
.rounded-full {
  border-radius: 99999px !important;
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
.shadow-none {
  box-shadow: 0 0 #0000;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  @at-root .gap {
    gap: 4px !important;
  }
  @at-root .gap-2 {
    gap: 8px !important;
  }
  @at-root .gap-3 {
    gap: 12px !important;
  }
  .grid-item-1 {
    grid-area: auto / span 1 !important;
  }
  .grid-item-2 {
    grid-area: auto / span 2 !important;
  }
  .grid-item-3 {
    grid-area: auto / span 3 !important;
  }
  .grid-item-4 {
    grid-area: auto / span 4 !important;
  }
  .grid-item-5 {
    grid-area: auto / span 5 !important;
  }
  .grid-item-6 {
    grid-area: auto / span 6 !important;
  }
  .grid-item-7 {
    grid-area: auto / span 7 !important;
  }
  .grid-item-8 {
    grid-area: auto / span 8 !important;
  }
  .grid-item-9 {
    grid-area: auto / span 9 !important;
  }
  .grid-item-10 {
    grid-area: auto / span 10 !important;
  }
  .grid-item-11 {
    grid-area: auto / span 11 !important;
  }
  .grid-item-12 {
    grid-area: auto / span 12 !important;
  }
}

<style>
请勿转载
꧁꫞꯭伟꯭伟꯭꫞꧂
关注
10.div+css基础学习五 float浮动、块级元素和行内元素的使用
qwsn
08-03 1976
1、float浮动 float: left; 脱离文档流浮动 left 元素向左浮动 right 元素向右浮动 清除浮动： clear: both; left 元素向左浮动 right 元素向右浮动 2、块级元素和行内元素的使用 块级元素： 他会独占一行，在默认情况下，其其宽度自动填满其父元素的宽度； 块级元素可以设置width、height属性； 块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性； 行内元素： 行内元素不会独占一行，相邻的行内元素会排列在
为Form中的控件添加漂亮的边框
笨笨的专栏
02-27 4057
今天把机子显示模式调到 "Windows经典"，发现 Form 中的 Text, Table 等控件都没有了边框，变成了空白。 而把创建控件的代码，加上 SWT.BORDER，显示的是三维凹陷的边框，不符合我的要求，我想要 PDE 那样的效果。 查看 Eclipse 源码，发现以下段： java 代码   public class FormToolkit {       ...
el-form-item，label在上方显示，输入框在下方展示
dy1717的博客
08-07 719
表单label展示与输入框上下结构显示
el-form表单登录数据
爱学习的小强
09-15 211
怎么创建一个带边框的表单？
qq_46582421的博客
05-10 706
使用El-table/El-form(同理)编辑数据并动态增加编辑框进行提交
Ricky_As的博客
08-17 1493
El-table/El-form编辑数据并动态增加El-table部分HTML部分功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 El-table部分 El-table实现编辑数据并动态增加列，大概样式图如下： 操作栏为按钮；当
Element Plus el-form表单自定义插槽如何使用
红烧咸咸鱼
10-20 3096
Element Plus el-form表单自定义插槽如何使用
form表单美化
技术成就梦想
01-21 5390
button,input,select,textarea{ vertical-align:middle; } textarea{ resize:none; vertical-align:top; overflow:auto; font:12px/1.5 Helvetica,Arial; width:500px; height:80px; } .form-text{ margi
基于elementui带连接线的树形控件的样式修改
min4233的博客
01-11 3051
基于elementui带连接线的树形控件的样式修改
elementui可视化设计_Vue+ElementUI实现表单动态渲染、可视化配置的方法
weixin_39875629的博客
01-15 663
动态渲染就是有一个异步的数据，大概长这样：{"inline": true,"labelPosition": "right","labelWidth": "","size": "small","statusIcon": true,"formItemList": [{"type": "input","label": "姓名","disable": false,"readonly": false,"va...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Day_01 传智健康项目-项目概述和环境搭建
lbw18的博客
06-18 650
ssm项目
攻略 | 如何实现一个满足业务需求的流程设计器
quanxiangcloud的博客
12-31 1037
背景 在低代码场景中，流程是一个必不可少的能力。流程的能力就是给予用户通过一个表单触发一个在不同时间节点流转的异步任务。那么如何将我们所构思的流程设计器付诸实现呢？今天便来手把手教大家！
修改element form表单 el-bottom边框样式和背景颜色
weixin_47560716的博客
10-27 1627
修改element form表单 el-bottom边框样式和背景颜色
Element框架之Form
woshierdanya的博客
08-08 1158
1.Radio 单选框 基础用法 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。 <template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-r...
关于form表单的美化方案讲解
dx_andy
08-22 3190
//内容：关于form表单的美化//作者：dx_andy//时间：2007.8.19 早//测试环境：apache2.2.4 php5.2.1 mysql5.0.27//联系：QQ:45665758 E-mail:dx_andy@163.com Form表单，不用多说，大家都应该知道。可以说Form表单是网页中一个不可缺少的元素。小到留言簿大到用户注册，调查系统，可以说Form表单在网络中无处
VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除
HanXiaoXi_yeal的博客
07-01 1万+
VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除
用elementUI写form表单，输入框获取焦点时给边框加颜色
zoepriselife316的博客
08-12 7043
原理上直接修改.el-input__inner:focus{border-color:#4D7CFE}，但我的样式继承了，多处使用，所以加了scoped,使用了穿透，就可以了 /deep/.el-input__inner:focus{ border:1px solid #4D7CFE; }
el-form组件自定义效验
最新发布
09-15
在 Element UI 的 `el-form` 组件中进行自定义验证通常涉及使用 `rules` 属性来定义表单字段的验证规则。自定义验证可以通过编写验证函数来完成，这些函数需要返回一个布尔值或一个包含错误信息的对象。下面是一个自定义验证的例子： ```javascript export default { data() { return { // 表单数据 form: { userName: '', age: '', }, // 表单验证规则 rules: { userName: [ { required: true, message: '请输入用户名', trigger: 'blur' }, // 自定义验证规则 { validator: this.validateUserName, trigger: 'blur' }, ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, ] } }; }, methods: { // 自定义验证方法 validateUserName(rule, value, callback) { if (value !== '允许的用户名') { callback(new Error('用户名验证失败')); } else { callback(); } } } } ``` 在上述代码中，`validateUserName` 是自定义的验证函数，它接收三个参数：当前规则对象 `rule`，字段的值 `value`，以及一个用于通知验证结果的回调函数 `callback`。如果验证不通过，回调函数应该传入一个 `Error` 对象；如果验证通过，调用回调函数而不传递任何参数或传递 `undefined`。 使用这种方式，你可以为表单字段添加任何自定义的验证逻辑，以确保用户输入满足你的应用程序的要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值