Question

我正在为实践构建表单验证程序，其中我使用类来存储每个字段的相关信息。我想要做的其中一个操作是当用户提交表单时，任何无效字段都会突出显示，并要求用户更正它们。最简单的方法就是将一个函数应用到每个字段，但我想知道是否有更好的方法。

由于所有这些形式的“字段集”都将它们的数据存储在同一类型的类 formField 中，因此应该可以循环遍历所有 formField 类将功能应用于他们对吗？我想你可以用某种方式把东西粘在一个数组中，但有没有更简单的方法来做呢？

目标是查看 formField 类的每个实例，如果配对 .valid .field 值的背景颜色>价值是假的。

class formField{
  constructor(type){
    this.field = $(type.get(0));
    this.info = $(type.get(1));
    this.valid = false;
  }
}

function charLimit(form, min, max){
  if (form.field.val().length >= min && form.field.val().length <=max && form.field.val().length > 0){
  form.info.text(max + " character limit, " + (max - form.field.val().length) + " characters remaining");
    form.valid = true;
  }
  else if (form.field.val().length <= 0){
    form.info.text("");
    form.valid = false;
  }
  else if (form.field.val().length > max){
    form.info.text(max + " character limit, " + (form.field.val().length - max) + " characters over");
    form.valid = false;
  }
  else if (form.field.val().length < min){
    form.info.text(min + " character minimum, " + (min - form.field.val().length) + " characters under");
    form.valid = false;
  }
  else {
    form.info.text("");
    form.valid = false;
  }
}

function unmark(form){
  if (form.valid === true){
    form.field.css({'background-color' : 'initial'})
    form.info.css({'color': 'initial'});
  }
}

let username = new formField($('.un'));
username.field.on("keyup", function(){
  charLimit(username, 4, 32);
  unmark(username);
});

let password = new formField($('.pw'));
password.field.on("keyup", function(){
  charLimit(password, 6, 16);
  unmark(password);
});

let passwordConfirm = new formField($('.pwc'));
passwordConfirm.field.on("keyup", function(){
  if (passwordConfirm.field.val() == password.field.val()){
    passwordConfirm.info.text("passwords match");
    passwordConfirm.valid = true;
  }
  else {
    passwordConfirm.info.text("The passwords do not match");
    passwordConfirm.valid = false;
  }
  unmark(passwordConfirm);
});

let comment = new formField($('.cmnt'));
comment.field.on("keyup", function(){
  charLimit(comment, 4, 140);
  unmark(comment);
});


function validate(form){
  if (form.valid !== true){
    form.field.css({'background-color' : 'red'})
    form.info.css({'color': 'red'});
  }
}

$('#button').on("click", function(){
  validate(username);
  validate(password);
  validate(passwordConfirm);
  validate(comment);
});

无论我看多少，我都忍不住觉得自己可以更有效地完成这项任务。

Answer 1

更理想的方法是使用单个类进行验证，包括验证方法。

class Validation {
  constructor (rules) {
    this.userRules = rules;
  }

  methods = {
    'required': function () {
      //
    },
    'maxlength': function () {
      //
    },
  }

  check () {
    for (let rule of rules)
      rule.rules.each (method) {
        this.methods[method].call()...
      }
    }
  }
}


// Usage
var validation = new Validation ({
  '#name': {
    rules: ['maxlength', 'required']
  },
  '#email': {
    rules: ['email', 'required']
  },
  // ...
});

function submit () {
  validation.check(callback)
}

将函数应用于类的每个实例

1 个答案: