多个JQuery验证仅应用于单个文本框

我正在编写扩展方法，将正则表达式验证应用于不同的文本框

HTML

<form class="getintouch_form" name="Form_ContactUs" action="" id="frm">
  <div class="getintouchform_field">
    <label class="inputform_label">Your Name*</label>
    <input class="inputform_textfld" type="text" placeholder="John Smith" maxlength="50" name="Name" id="TxtName" />
  </div>
  <div class="getintouchform_field">
    <label class="inputform_label">Your Email Address*</label>
    <input class="inputform_textfld" type="text" placeholder="john@thiscompany.com" name="Email" id="TxtEmailId" />
  </div>
  <div class="getintouchform_field">
    <label class="inputform_label">Best number to call you back on*</label>
    <input class="inputform_textfld" type="text" placeholder="Telephone or Cell number" name="ContactNumber" id="TxtContactNumber" />
  </div>
  <div class="getintouchform_field">
    <label class="inputform_label">Company Name*</label>
    <input class="inputform_textfld" type="text" placeholder="Company Name" name="CompanyName" id="TxtCompanyName" />
  </div>
  <div class="getintouchform_field">
    <label class="inputform_label">Role in an Organization*</label>
    <input class="inputform_textfld" type="text" placeholder="Role in an Organization" name="Role" id="TxtRole" />
  </div>
  <div class="getintouchform_field">
    <label class="inputform_label">Optional Message</label>
    <textarea class="inputform_textarea" placeholder="Type your message here..." id="OptionalMessage"></textarea>
  </div>
  <button class="submitbtn bluebutton" id="BtnSend" type="button">send</button>
</form> 

var _form = $("#frm");

$.validator.addMethod(
  "Email",
  function(value, element) {
    return /^([a-zA-Z0-9._-]+@@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5})$/i.test(value);
  },
  "Please enter a valid email address."
);

$.validator.addMethod(
  "Name",
  function(value, element) {
    return /^[a-zA-Z]+([a-zA-Z ]+)*$/i.test(value);
  },
  "Please enter a valid Name."
);

$.validator.addMethod(
  "ContactNumber",
  function(value, element) {
    return /^[A-Z0-9 _]*[A-Z0-9][A-Z0-9 _]*$/i.test(value);
  },
  "Please enter a valid ContactNumber."
);

_form.validate({
  onfocusout: function(element) {
    $(element).valid();
  },
  rules: {
    Name: {
      required: true
    },
    Email: {
      required: true
      //email: true
    },
    ContactNumber: {
      required: true,
      maxlength: 15
    },

    CompanyName: {
      required: true
    },
    Role: {
      required: true
    }
  },

  messages: {
    Name: {
      required: "Name is mandatory field."
    },
    ContactNumber: {
      required: "Contact Number is mandatory field. ",
      maxlength: "Invalid Contact Number.",
      phoneUS: "Invalid Contact Number."
    },
    Email: {
      required: "Email is mandatory field."
    },
    CompanyName: {
      required: "Company Name is mandatory field."
    },
    Role: {
      required: "Role In Organization is mandatory field."
    }
  },
  submitHandler: function(form) {
    _insertData();
  }
});

我的问题是名称验证应用于所有文本框。我附上了截图：

CodePen:

您可以使用after将规则连接到CSS类，然后将类添加到输入字段

$.validator.addClassRules({
    Email : { Email : true },
    FullNameField : { FullNameField : true},
    ContactNumber : { ContactNumber : true}, 
});

然后将类添加到输入字段：

<input class="inputform_textfld Email" type="text" placeholder="john@thiscompany.com" name="Email" id="TxtEmailId" />
<input class="inputform_textfld ContactNumber" type="text" placeholder="Telephone or Cell number" name="ContactNumber" id="TxtContactNumber" />
<input class="inputform_textfld CompanyName" type="text" placeholder="Company Name" name="CompanyName" id="TxtCompanyName" />

如前所述：

---

没有理由将单个规则附加到类名。通过 默认情况下，规则的名称已可用作类名。 换句话说，您不需要.addClassRules（）来执行class=“Email”； 它的工作原理完全相同。.addClassRules（）的唯一要点是 通过将多个规则分配给单个类来生成“复合”规则 名字

因此，您只需添加不带

addClassRules

的类。最后，在internet的帮助和一些研究的帮助下，我通过如下更改名称属性来解决此问题：

rules: {
    FullName: {
      required: true,
      FullName: true
    },
    UserEmail: {
      required: true
      UserEmail: true,
    },
    ContactNumber: {
      required: true,
      maxlength: 15,
      ContactNumber : true,
    },

    CompanyName: {
      required: true
    },
    Role: {
      required: true
    }
  }

名称->全名
电子邮件->用户电子邮件

这是我的最终代码：

$.validator.addMethod(
  "UserEmail",
  function(value, element) {
    return /^([a-zA-Z0-9._-]+@@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5})$/i.test(value);
  },
  "Please enter a valid email address."
);

$.validator.addMethod(
  "FullName",
  function(value, element) {
    return /^[a-zA-Z]+([a-zA-Z ]+)*$/i.test(value);
  },
  "Please enter a valid Name."
);

$.validator.addMethod(
  "ContactNumber",
  function(value, element) {
    return /^[A-Z0-9 _]*[A-Z0-9][A-Z0-9 _]*$/i.test(value);
  },
  "Please enter a valid ContactNumber."
);

在validation Rule中，我检查了如下附加方法：

rules: {
    FullName: {
      required: true,
      FullName: true
    },
    UserEmail: {
      required: true
      UserEmail: true,
    },
    ContactNumber: {
      required: true,
      maxlength: 15,
      ContactNumber : true,
    },

    CompanyName: {
      required: true
    },
    Role: {
      required: true
    }
  }

---

最后它成功了。谢谢大家的帮助。

我怀疑这是因为所有输入都有

name=“something”

，并且它将该属性与验证方法相匹配。但是正如您所看到的，所有文本框都有不同的名称值。您也可以检查codepen。我知道名称值不同。我认为它匹配的是属性名，而不是值。这与它自动识别

required

属性等同于在规则中使用

required:

的方式相同。我在您的代码笔中没有看到任何验证消息。但是我认为

name=“fullName”

必须是

name=“FullNameField”

才能匹配验证。没有理由将单个规则附加到类名。默认情况下，规则的名称已经可以用作类名。换句话说，您不需要

.addClassRules（）

来执行

class=“Email”

；它的工作原理完全相同。

.addClassRules（）

的唯一要点是通过为单个类名指定多个规则来创建“复合”规则。@Sparky感谢您的解释，我已将您的注释添加到我的答案中。