el-form动态表单动态验证(先验证不为空,再验证长度在20以内,最后向后台发送请求验证账号是否重复)

javascript 复制代码
data(){
   var checkSno = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入账号"));
      } else if (value.length > 20) {
        callback(new Error("长度为1-20"));
      } else {
        if (this.form.id) {
          // 修改时检查账号是否重复
          selectLoginId({ sno: value, id: this.form.id })
            .then((res) => {
              if (res) {
                callback();
              } else {
                callback(new Error("账号重复,请选择其他账号"));
              }
            })
            .catch((error) => {
              callback(new Error("验证失败,请重试"));
            });
        } else {
          // 新增时检查账号是否重复
          selectLoginId({ sno: value })
            .then((res) => {
              if (res) {
                callback();
              } else {
                callback(new Error("账号重复,请选择其他账号"));
              }
            })
            .catch((error) => {
              callback(new Error("验证失败,请重试"));
            });
        }
      }
    };
   return{
    rules: {
        sno: [{ validator: checkSno, trigger: "blur" }],
    }
   }
}

html代码:

html 复制代码
        <el-form-item
          label="账号"
          :label-width="formLabelWidth"
          required
          prop="sno"
        >
          <el-input v-model="form.sno" autocomplete="off"></el-input>
        </el-form-item>
相关推荐
Carolinemy1 分钟前
ElementUI 之 el-table
前端·vue.js
裘乡4 分钟前
vonage音视频基本使用--web@opentok/client
前端·音视频开发
BugCollect7 分钟前
Lodash常用方法
前端·javascript
RainbowSea13 分钟前
伙伴匹配系统(移动端 H5 网站(APP 风格)基于Spring Boot 后端 + Vue3 - 01
vue.js·spring boot·后端
工业互联网专业14 分钟前
基于JavaWeb的兼职发布平台的设计与实现
java·vue.js·spring boot·毕业设计·源码·课程设计·兼职发布平台
低代码布道师24 分钟前
HTML5 `<figure>` 标签:提升网页语义化与可访问性的利器
前端·html·html5
CAD老兵27 分钟前
解锁 JavaScript 模块的秘密:ES6模块内部结构详解
前端·javascript
程序视点30 分钟前
豹图CAD完全免费版下载 - 专业DWG看图软件推荐 | 支持AutoCAD全版本
前端
gnip34 分钟前
nrm
前端·javascript
天天码行空36 分钟前
Radash: 新一代前端工具库平替Lodash库
前端·javascript·github