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

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的帮助和互联网上的一些研究，我解决它通过更改名称属性是这样的：

名称 - >全名
电子邮件 - > 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 
    } 
    } 

最后它的工作原理。感谢您的帮助。