arrayの使用.JavaScriptオブジェクトの検証を合理化する

JavaScriptのオブジェクトの妥当性検査は、良いフレームワークが存在しない場合は退屈です.このポストではArray.reduce オブジェクトの検証を行う方法は、治療のように感じる!

手動検証
我々にはあると言いましょうuser オブジェクトとそれを有効にするために渡す必要があるいくつかの基準.ここでは、プロパティと基準を満たす必要があります:
支柱
基準
名称
2文字より長い
パスワード
8文字より長い
確認
パスワードにマッチする
年齢
十八以上
検証に多少手動でアプローチをするなら、次のように書くかもしれません.

const user = {
  name: "Bob",
  password: "kaBob123",
  confirmPassword: "kaBob123",
  age: 19,
};

const errors = [];

if (user.name.length < 2) {
  errors.push("User's name is too short");
}

if (user.password.length < 8) {
  errors.push("User's password is too short");
}

if (user.password !== user.confirmPassword) {
  errors.push("Password and confirmation do not match");
}

if (user.age < 18) {
  errors.push("User must be at least 18 years old");
}

const isValid = errors.length === 0;

我々errors 配列はどんなバリデーションエラーでも設定され、配列が0より大きい場合、isValid 変数はfalse .

検証フレームワークの作成
これは少数の検証のために正しく動作しますが、私は配列のルールの大きなセットを整理し、reduce エラーがあるかどうかを判断する方法

// Validation rules
const rules = [
  {
    test: (user) => user.name.length > 2,
    message: "User's name is too short",
  },
  {
    test: (user) => user.password.length >= 8,
    message: "User's password is too short",
  },
  {
    test: (user) => user.password === user.confirmPassword,
    message: "Password and confirmation do not match",
  },
  {
    test: (user) => user.age >= 18,
    message: "User must be at least 18 years old",
  },
];

// Test object against rules
const errors = rules.reduce((errs, rule) => {
  const result = rule.test(user);
  if (result === false) {
    errs.push(rule.message);
  }
  return errs;
}, []);

const isValid = errors.length === 0;

今、我々は一貫性のあるインターフェイスを持ってルールを追加することができますだけで我々の配列に追加のオブジェクトを追加することができます!

再利用可能な検証関数の作成
バリデータのユーティリティを拡張するには、オブジェクトを取得する関数、規則のセットを作成し、エラーと妥当性検査のステータスを返します.その関数を作りましょう.

const validate = (obj, rules) => {
  const errors = rules.reduce((errs, rule) => {
    const result = rule.test(obj);
    if (result === false) {
      errs.push(rule.message);
    }
    return errs;
  }, []);

  return {
    errors,
    isValid: errors.length === 0
  }
}

今、我々はオブジェクトを検証する必要がある場合は、この関数を使用することができます!前の例で試してみて、全く有効でないユーザーオブジェクトを使いましょう.

// Invalid user object
const user = {
  name: "Bob",
  password: "kaBob123",
  confirmPassword: "kaBob12",
  age: 17,
};

// Validation rules
const rules = [
  {
    test: (user) => user.name.length > 2,
    message: "User's name is too short",
  },
  {
    test: (user) => user.password.length >= 8,
    message: "User's password is too short",
  },
  {
    test: (user) => user.password === user.confirmPassword,
    message: "Password and confirmation do not match",
  },
  {
    test: (user) => user.age >= 18,
    message: "User must be at least 18 years old",
  },
];

// Validation function
const validate = (obj, rules) => {
  const errors = rules.reduce((errs, rule) => {
    const result = rule.test(obj);
    if (result === false) {
      errs.push(rule.message);
    }
    return errs;
  }, []);

  return {
    errors,
    isValid: errors.length === 0,
  };
};

// Testing our object
const result = validate(user, rules);

// {
//   errors:
//    [ 'Password and confirmation do not match',
//      'User must be at least 18 years old' ],
//   isValid: false
// }

私はあなたの使用のこの探査を楽しんでほしいArray.reduce 私たちのオブジェクトの検証を行うには、もう少し一貫性と楽しい.
ハッピーコーディング!