0

我正在使用此代码来验证邮政编码。该代码就像一个魅力，但我想在提交之前验证输入并确保输入仅为数字。我将此添加到代码中：

Code1- 验证数字输入的代码

 function validateForm() {
     var x = document.forms["form2"]["postal"].value;
     if(/[^0-9]+$/.test(x)) {
         alert("The postcode must have ONLY numeric characters - Please go to contact page if you live outside Australia.");
         myformName.myformField.focus();
         return false;
     }
 }

但不幸的是它不起作用。有没有人可以帮我解决这个问题？我想知道如何将上面的代码集成到下面的代码中：

code2 - 主要代码

$(document).ready(function () {
    $('#tab-container').easytabs();
});
var xmlHttp;

function check() {
    xmlHttp = GetXmlHttpObject();
    if(xmlHttp == null) {
        alert("Browser does not support HTTP Request");
        return;
    }
    var code = document.getElementById("postal").value;
    document.getElementById("loader4").style.visibility = 'visible';
    var url = "Ajax/check_code.php";
    url = url + "?p=" + code;
    //alert(code);
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);

    function stateChanged() {
        if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
            //alert(xmlHttp.responseText);
            if(xmlHttp.responseText == 1) {
                //alert(xmlHttp.responseText);
                //document.getElementById("pro").disabled = false; 
                window.location.href = 'booking.html';
            } else if(xmlHttp.responseText == 0) {
                document.getElementById("results").style.visibility = 'visible';
                document.getElementById("results").innerHTML = 'Alert Message';
            }
            document.getElementById("loader4").style.visibility = 'hidden';
        }
    }
}

function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch(e) {
        //Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

这是HTML：

<form name="form2" onsubmit="return validateForm();">
    <label>STEP 1:</label>
    <label>Enter Your Post Code</label>
    <input type="text" name="postal" placeholder="e.g. 4000" id="postal"  />
    <input type="button" class="call-to-action" name="pro" id="pro" onclick="check()" value="Book Now" />
</form>

所以我想再次在 code2 中添加 code1 并获得数字验证。

4

1 回答 1

0

这是您的代码示例，它将单击处理程序绑定到按钮，并在提交 AJAX 请求之前pro首先检查4 位数字（通过您的处理程序。我已将一个添加到您的标签和您的按钮以适应这个。postcode$.get()Ajax/check_code.phpid<form>

HTML：

<div id="results"></div>
<form id="form2" name="form2" action="booking.html">
    <label>STEP 1:</label>
      <label>Enter Your Post Code</label>
      <input type="text" name="postal" placeholder="e.g. 4000" id="postal"  />
      <input type="button" class="call-to-action" name="pro" id="pro"  value="Book Now" />
</form>

使用 jQuery 的 Javascript：

$(document).ready(function () {
    //$('#tab-container').easytabs();
    $('#pro').on('click', function() {
        $('#results').hide();
        var $postal = $('input[name="postal"]');
        if (!/^[0-9]{4}$/.test($postal.val())) {
            alert("The postcode must have ONLY numeric characters - Please go to contact page if you live outside Australia.");
            $postal.focus();
            return false;
        }
        $.get('Ajax/check_code.php', {p: $postal.val()}, function(data) {
            if (data == 0) {
                // data = 0
                $('#results').html('Alert Message').show();
                return false;
            }

        });
    });
});

这是一个JSFiddle

于 2013-06-09T10:26:18.480 回答