Javascript 将数字输入的验证集成到代码的其余部分

我正在使用此代码验证邮政编码。代码工作起来很有魅力，但我想在提交之前验证输入，并确保输入仅为数字。我在代码中添加了以下内容：

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;
     }
 }

但不幸的是，它不起作用。有人能帮我吗？我想知道如何将上述代码集成到下面的代码中：

代码2-主代码

$(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>

步骤1：
输入您的邮政编码

---

因此，我想再次将code1添加到code2中，并进行数字验证。

下面是一个代码示例，它将单击处理程序绑定到

pro

按钮，并在提交AJAX请求之前（通过

$.get（）首先检查
邮政编码是否为4位数字）
添加到您的
Ajax/check_code.php
处理程序中。我已经在您的
标记中添加了一个
id
，以及您的按钮以适应此操作

HTML:

这里有一个
它以什么方式不起作用？你的控制台中有错误吗？嗨@arnorhs没有，没有错误。听起来添加的代码甚至不存在..是否调用了你的validate form方法？我调试它的方式是添加一个控制台。log（）在验证函数的顶部，查看是否调用了它。如果调用了，那么我会尝试查看表单字段的值是多少，同时使用console.log。如果值正确，那么我会查看正则表达式。在已经加载了jQuery的情况下，是否有理由不使用jQuery选择器和AJAX函数？@itsmejodie没有理由。只是不知道更好的方法。邮政编码在服务器端进行检查。你是说我也应该在服务器端进行数字验证吗？你的代码更短更干净，但是服务器端文件没有检查输入。加载程序也没有显示。当我输入一个righ时，页面也不会重定向到book.html页面t邮政编码。
<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>

$(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;
            }

        });
    });
});