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();
                }
              });
            };
  • 相关阅读:
    Django:重定向
    Django:使用get_template、render实现读取数据并传递数据
    Django:读入html中的数据
    Django:urls配置路由地址
    Django:基础知识-创建模块
    HTMLTestRunner美化
    python2 selenium
    Jmeter检查点
    Jmeter集合点
    jmeter的三种参数化方式
  • 原文地址:https://www.cnblogs.com/milankundea/p/13792197.html
Copyright © 2011-2022 走看看