使用Java验证输入文本字段

Question

I guess I'm doing a trivial error somewhere but will be grateful if someone can spot it. I am trying to validate a postcode in a form field once it has been typed in. Similar code works fine in PHP but I've spent hours and the JS does not seem to be executing whatever I do. Here is part of the form (all within body tags):

<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 />

Here are versions of the javascript (stuffed with alerts just to print out something). Version 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...");
            }

Version 2 (is called without a parameter):

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...");
            }

I tried binding to other events but can't get a single alert out. Even exact reproduction of the examples is not working. Hope someone gives me an idea of what is wrong.

Answer 1

You should use the keyup event to do that and add the event using JS, not inline it.

postcodeRegEx is a regex, not a string, you need to remove quotes around it.

 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][az]{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

you should replace onchange with keyup and remove quotes from regex :)

<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...");
        }