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>
相关推荐
iphone1082 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck9 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00120 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00121 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾24 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐28 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价29 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花30 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101330 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树31 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js