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

integrating validation for numeric input into the rest of the code

本文关键字：余部 代码 集成 数字输入 验证      更新时间：2023-09-26

我使用这个代码来验证邮政编码。代码像魅力一样工作，但我想在提交之前验证输入，并确保输入是数字。我把这个添加到代码中:

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并获得数字验证工作。

这是一个代码的例子，它绑定了一个点击处理程序到pro按钮，并首先检查postcode是一个4位数之前提交一个AJAX请求(通过$.get()到你的Ajax/check_code.php处理程序)。我已经添加了一个id到你的<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>

Javascript使用jQuery:

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

相关文章：