jquery.validateのグループバリデーションコードの書き方

2年 ago
綾乃, 一希
1 minute

jQuery Validationプラグインのgroupsオプションを使用して、グループごとの検証を行うことができます。このオプションでは、複数のフォームフィールドを1つのグループに分け、エラーメッセージを1つにまとめることができます。

jQuery Validationプラグインを使用してグループ検証を行うサンプルコードを以下に示します。

翻訳：書籍を読むと新しいアイデアが生まれ、インスピレーションが得られます。

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" /><br/>
  
  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email" /><br/>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" /><br/>
  
  <label for="confirmPassword">确认密码：</label>
  <input type="password" id="confirmPassword" name="confirmPassword" /><br/>
  
  <input type="submit" value="提交" />
</form>

ネイティブな日本語で言い換えてください。1つだけ必要です。

$(function() {
  // 配置分组验证规则
  $("#myForm").validate({
    groups: {
      // 将密码和确认密码字段合并为一个错误消息
      passwordGroup: "password confirmPassword"
    },
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      password: "required",
      confirmPassword: {
        required: true,
        equalTo: "#password" // 确认密码必须和密码字段相等
      }
    },
    messages: {
      name: "请输入姓名",
      email: {
        required: "请输入邮箱",
        email: "请输入有效的邮箱地址"
      },
      password: "请输入密码",
      confirmPassword: {
        required: "请确认密码",
        equalTo: "两次输入的密码不一致"
      }
    }
  });
});

上のコードでは、groupsというオプションを使用してパスワードと確認パスワードフィールドを1つのエラーメッセージにまとめました。その後、rulesオプションとmessagesオプションでは、それぞれ各フィールドのバリデーションルールとエラーメッセージを定義しています。

フォームの提出時に、なんらかの項目が検証を通過しなかった場合、プラグインはそのエラーメッセージをフォームの下に表示します。

お役に立てたら幸いです！

bannerAds