Question

我正在尝试使用此jQuery插件http://bassistance.de/jquery-plugins/jquery-plugin-validation，以便我可以验证我正在制作的表单。但它似乎没有验证手机领域。谁能帮我理解我做错了什么？

这是我目前的代码

<script type="text/javascript">
 var validator
 jQuery(document).ready(function() {
     validator = jQuery("#participateform").validate();
 });

function sendRequest(){ 
        var validform=validator.form();       
        if(validform)
        {
            alert("Form is valid");
        }
}
</script>

<form id="participateform" >
    <div class="table">
        <div class="tr">
            <div class="td">fullname</div>
            <div class="td">
                <input type="text" value="" id="fullname" name="fullname" class="required" />
            </div>
        </div>
        <div class="tr">
            <div class="td">your e-mail </div>
            <div class="td">
                <input type="text" value="" id="e-mail" name="e-mail" class="required email" />
            </div>
        </div>
        <div class="tr">
            <div class="td">area</div>
            <div class="td">
                <select id="area" name="area"></select>
            </div>
        </div>
        <div class="tr">
            <div class="td">Phone 1</div>
            <div class="td">
                <input type="text" value="" id="phone" name="phone" class="required phone"/>                
            </div>
        </div>
        <div class="tr">
            <div class="td">Phone 1</div>
            <div class="td">
                <input type="text" value="" id="phone2" name="phone2" />
            </div>
        </div>

    </div>

    <input type="button" id="btnsubmit" value="submit" onclick="sendRequest()"> 
</form>

Answer 1

手机上的哪种验证失败了？

快速查看source code是否缺少手机作为验证类。

修改

您需要添加自定义规则：

$(document).ready(function(){ $.validator.addMethod("phone", function(value, element) { //Any code that will return TRUE or FALSE return /^(\d+){10}$/.test(value); }, "Error message"); });

Answer 2

库的源代码表明此库使用以下电话验证规则：

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, "");
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

jQuery.validator.addMethod('phoneUK', function(phone_number, element) {
    phone_number = phone_number.replace(/\s+|-/g,'');
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/);
}, 'Please specify a valid phone number');

jQuery.validator.addMethod('mobileUK', function(phone_number, element) {
    phone_number = phone_number.replace(/\s+|-/g,'');
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^((0|\+44)7(0|4|5|6|7|8|9){1}\d{2}\s?\d{6})$/);
}, 'Please specify a valid mobile number');

//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to exclude many premium numbers
jQuery.validator.addMethod('phonesUK', function(phone_number, element) {
    phone_number = phone_number.replace(/\s+|-/g,'');
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(0[1-3]{1}[0-9]{8,9})$/) || phone_number.match(/^(07[5-9]{1}[0-9]{7,8})$/);
}, 'Please specify a valid uk phone number');

所以不要这样做：

<input type="text" value="" id="phone" name="phone" class="required phone"/>

请尝试使用美国电话号码：

<input type="text" value="" id="phone" name="phone" class="required phoneUS"/>

或者这是英国的电话号码：

<input type="text" value="" id="phone" name="phone" class="required phoneUK"/>

或者这是英国手机号码

<input type="text" value="" id="phone" name="phone" class="required mobileUK"/>

Answer 3

尝试查看here，似乎您应该使用其他内置验证方法，例如digits()或phoneUS()

Answer 4

如上所述，手机没有验证。您可以使用jQuery.validator.addMethod（）来定义您自己的（即使是正则表达式或者您想要的），它也有详细记录。

另见： http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

使用表单验证插件时遇到问题

4 个答案: