zoukankan      html  css  js  c++  java
  • Antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效



    antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)

    antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数
    • 错误代码
      organizationId: {rules: [
                   {required: true, message: '请输入团支部!'},
                   { validator: tpMemberCount ,trigger: 'change'},
                 ],
               },  //导致失效的地方  
                   //具体验证方法
            let tpMemberCount = (rule, value, callback) => {
                  console.log(value)
                  try {
                    getAction("/tp/tpOrganization/queryById", {id: value}).then((res) => {
                      if (res.success) {
                        let MemberCount = res.result.tyNumber
                        console.log(MemberCount)
                        callback();
                        if (MemberCount < 1) {
                          callback(new Error('该支部下无团员,请重新选择。'));
                        }
                      } else {
                        this.$message.warning("未查询到[" + res.result.orgName + "]组织人数,请手动填入");
                        callback();
                      }
                    });
                  } catch (err){
                    callback();
                  }
                  };
    当不设置自定义校验方法时 其他校验均有效
    • 修改子自定义的校验方法
    • 解决过程代码
    • let tpMemberCount = (rule, value, callback) => {
            console.log(1)
              getAction("/tp/tpOrganization/queryById", {id: value}).then((res) => {
                if (res.success) {
                  let MemberCount = res.result.tyNumber
                  if (MemberCount < 1) {
                    callback(new Error('该支部下无团员,请重新选择。'));
                    console.log(2)
                  }else {
                    callback()
                  }
                  // if (value == undefined && value == null && value == ''){
                  //   callback(new Error('请选择请团支部'));
                  //   console.log(3)
                  // }
                } else {
                  this.$message.warning("未查询到[" + res.result.orgName + "]组织人数,请手动填入");
                  callback();
                  console.log(4)
                }
              });
            callback()
            console.log(5)
            };

    结论在自定义的验证的方法中出现了问题

    • 修改后正确代码

      let tpMemberCount = (rule, value, callback) => {
              getAction("/tp/tpOrganization/queryById", {id: value}).then((res) => {
                if (res.success) {
                  let MemberCount = res.result.tyNumber
                  if (MemberCount < 1) {
                    callback(new Error('该支部下无团员,请重新选择。'));
                  }else {
                    callback()
                  }
                } else {
                  this.$message.warning("未查询到[" + res.result.orgName + "]组织人数,请手动填入");
                  callback();
                }
              });
            };
  • 相关阅读:
    Webpack配置开发环境总结
    vue2.0 引入font-awesome
    vue-cli 脚手架项目简介(一)
    CSS3伪类与伪元素的区别及注意事项
    页面滚动到可视区域执行操作
    56. 合并区间
    <leetcode c++>卖股票系列
    面试题 16.01. 交换数字
    542. 01 矩阵
    <leetcode c++> 445. 两数相加 II
  • 原文地址:https://www.cnblogs.com/milankundea/p/13792197.html
Copyright © 2011-2022 走看看