Question

我想我在某个地方做了一个微不足道的错误但如果有人能发现它会很感激。我打算在输入表单字段时验证一个邮政编码。类似的代码在PHP中工作正常，但我花了好几个小时，JS似乎没有执行任何操作。这是表单的一部分（全部在body标签内）：

<form name ="register" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off">

...


<script  type="text/javascript" src="common.js">
             </script>

<input type="text" name="postcode" class="form-control" placeholder="Postcode" maxlength="10"  value='' onchange="isValidPostcode(this.form)"  required />

以下是javascript的版本（填充警报只是为了打印出来的东西）。版本1：

function isValidPostcode(form) { 
    alert("called");

             var p = document.register.postcode.value;
             var postcodeRegEx = '/^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i'; 
             if (postcodeRegEx.test(p)) alert("OK"); 
             else alert("This does not look a valid UK postcode...");
            }

版本2（不带参数调用）：

function isValidPostcode() { 
    alert("called");
             var p = document.getElementById('postcode').value.replace(/\s/g,''); 

             var postcodeRegEx = '/^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i'; 
             if (postcodeRegEx.test(p)) alert("OK"); 
             else alert("This does not look a valid UK postcode...");
            }

我尝试绑定其他活动，但无法获得单一提醒。即使精确复制这些例子也行不通。希望有人能让我知道出了什么问题。

Answer 1

您应该使用keyup事件来执行此操作并使用JS添加事件，而不是内联它。

postcodeRegEx是正则表达式，而不是字符串，您需要删除它周围的引号。

function isValidPostcode() {
    var p = document.getElementById('postcode').value.replace(/\s/g, '');

    var postcodeRegEx = /^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i;

    if (postcodeRegEx.test(p)) alert("OK");
    else alert("This does not look a valid UK postcode...");
}
document.getElementById("postcode").addEventListener("keyup", function() {
    isValidPostcode();
});

<form name="register" method="post" action="" autocomplete="off">
    <input id="postcode" type="text" name="postcode" class="form-control" placeholder="Postcode" maxlength="10" value='' required />
</form>

Answer 2

你应该用keyup替换onchange并从正则表达式中删除引号：）

<input type="text" name="postcode" class="form-control" placeholder="Postcode" maxlength="10"  value='' onkeyup="isValidPostcode(this.value)"  required />

function isValidPostcode(value) { 
        var postcodeRegEx = /^([g][i][r][0][a][a])$|^((([a-pr-uwyz]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1}([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9][a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1}[1-9][a-z]{1}))(\d[abd-hjlnp-uw-z]{2})?)$/i; 
         if (postcodeRegEx.test(value)) console.log("OK"); 
         else console.log("This does not look a valid UK postcode...");
        }

使用Javascript验证输入文本字段

2 个答案: