Question

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

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>

Jquery

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：https://codepen.io/anon/pen/ybwvwv

Answer 1

您可以在.addClassRules()之后使用.addMethod()将规则连接到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" />

Updated CodePEN

同样sparky说：

没有理由将单个规则附加到类名。通过默认情况下，规则名称已经可以用作类名。换句话说，你不需要.addClassRules（）来做class =“Email”; 它将完全相同的工作。 .addClassRules（）的唯一要点是通过为单个类分配多个规则来制定“复合”规则名。

所以你只需要添加没有addClassRules

的类

Answer 2

最后在Barmar的帮助和互联网上的一些研究中，我通过更改名称属性解决了这个问题：

名称 - ＆gt;全名
电子邮件 - ＆gt; USEREMAIL

这是我的最终代码：

$.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."
);

在验证规则中，我检查了这样的其他方法：

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

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

最后它有效。感谢您帮助所有人。

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

2 个答案: