Question

我正在尝试创建一个验证器，它对我的服务器进行REST调用并获取数据库的值。一些问题，当我的验证器启用时，它只验证输入而不是其他约束。此外，我一直收到Id长度[validate.js] Attribute id has a non numeric value for length的错误，当我不使用异步验证器时，我没有收到此错误。

这是我的验证员：

  validate.validators.myAsyncValidator = function(input, options, key, attributes) {
return new validate.Promise(function(resolve, reject) {
  if (!validate.isEmpty(input.value)) {
    axios.get('/data-management/verify-data', {
        params: {
          id: input.value,
          filter: options[0]
        }
      })
      .then(function(response) {
        if (response.data !== options[1]) resolve(" already exists!");
      })
      .catch(function(error) {
        resolve(": Error, try again.");
      });
  }
}); };

以下是我的约束：

var constraints = {
email: {
  presence: true,
  email: true
},
password: {
  presence: true,
  format: {
    // We don't allow anything that a-z and 0-9
    pattern: "^[a-zA-Z0-9!@#$&()\\-`.+,/\"]*$",
    // but we don't care if the username is uppercase or lowercase
    flags: "i",
    message: "Must contain at least 1 Uppercase, 1 Lowercase, 1 Number, and 1 Special Character"
  },
  length: {
    minimum: 6,
    message: "Must be at least 6 characters"
  }
},
"confirm-password": {
  presence: true,
  equality: {
    attribute: "password",
    message: "^The passwords does not match"
  }
},
district: {
  presence: true
},
id: {
  presence: true,
  length: {
    minimum: 5,
    maximum: 20,
    message: "Must be between 6-20 characters"
  },
  format: {
    // We don't allow anything that a-z and 0-9
    pattern: "[a-z0-9]+",
    // but we don't care if the username is uppercase or lowercase
    flags: "i",
    message: "can only contain a-z and 0-9"
  },
  myAsyncValidator: ["signup", false]
}};

我把约束连接到我的表格上：

var inputs = document.querySelectorAll("input, textarea, select");
  for (var i = 0; i < inputs.length; ++i) {
    inputs.item(i).addEventListener("change", function(ev) {
      // var errors = validate.async(form, constraints).then(function(data) {
      //   console.log("data");
      // });
      var obj = this;
      var n = this.name;
      validate.async(form, constraints).then(function() {

      }, function(errors) {
        showErrorsForInput(obj, errors[n.valueOf()]);
      });


    });
  }

  function handleFormSubmit(form, input) {
    // validate the form against the constraints
    // var errors = validate.async(form, constraints).then(function(data) {
    //   console.log("data2");
    // });
    validate.async(form, constraints).then(function() {

    }, function(errors) {
      showErrors(form, errors || {});
      if (!errors) {
        showSuccess();
      }

    });

如果需要，我可以提供功能showErrors（），showSuccess（）和showErrorsForInput（）。

谢谢！

Answer 1

找到解决方案。首先检查ID约束，一旦它们消失，我检查了其余的约束。还添加了一个tokenizer来删除我收到的长度错误。

以下是更新后的代码：

validate.validators.checkExists = function(input, options) {
    return new validate.Promise(function(resolve, reject) {
      if (!validate.isEmpty(input.value)) {
        axios.get('/data-management/verify-data', {
            params: {
              id: input.value,
              filter: options[0]
            }
          })
          .then(function(response) {
            if (response.data !== options[1]) resolve("already exists!");
            else resolve();
          })
          .catch(function(error) {
            reject(": Error, try again.");
          });
      } else resolve();
    });
  };

  // These are the constraints used to validate the form
  var constraints = {
    email: {
      presence: true,
      email: true
    },
    password: {
      presence: true,
      format: {
        pattern: "^[a-zA-Z0-9!@#$&()\\-`.+,/\"]*$",
        flags: "i",
        message: "Must contain at least 1 Uppercase, 1 Lowercase, 1 Number, and 1 Special Character"
      },
      length: {
        minimum: 6,
        message: "must be at least 6 characters"
      }
    },
    "confirm-password": {
      presence: true,
      equality: {
        attribute: "password",
        message: "^The passwords does not match"
      }
    },
    firstName: {
      presence: true
    },
    lastName: {
      presence: true
    },
    district: {
      presence: {
        message: "must be selected"
      }
    }
  };

  var idConstraints = {
    id: {
      presence: true,
      length: {
        minimum: 5,
        tokenizer: function(input) {
          try {
            return input.value;
          } catch (e) {
            return " ";
          }
        }
      },
      checkExists: ["signup", false]
    }
  };

  // Hook up the form so we can prevent it from being posted
  var form = document.querySelector("form#signup");
  form.addEventListener("submit", function(ev) {
    ev.preventDefault();
    handleFormSubmit(form);
  });

  // Hook up the inputs to validate on the fly
  var inputs = document.querySelectorAll("input, textarea, select");
  for (var i = 0; i < inputs.length; ++i) {
    inputs.item(i).addEventListener("change", function(ev) {
      var obj = this;
      var n = this.name;

      validate.async(form, idConstraints).then(function() {
        var moreErrors = validate(form, constraints) || {};
        showErrorsForInput(obj, moreErrors[n.valueOf()]);
      }, function(errors) {
          showErrorsForInput(obj, errors[n.valueOf()]);
      });
    });
  }

  function handleFormSubmit(form) {
    validate.async(form, idConstraints).then(function() {
      var errors = validate(form, constraints);
      showErrors(form, errors || {});
    }, function(errors) {
      showErrors(form, errors || {});
      if (!errors) {
        showSuccess();
      }
    });
  }

ValidateJS异步REST调用

1 个答案: