0
<html>
<head>
<title> Form Validation </title>
<style type="text/css">
fieldset { width: 280px; padding: 6px; }
label { float: left; width: 100px; font: 12px Arial; padding: 5px; }
input { margin-bottom: 5px; }
</style>
</head>

<body>
<form id="inputForm" onsubmit="return validateForm();" action="#">
<fieldset>
    <label>First Name:</label><input type="text" name="first_name" /><br />
    <label>Surname:</label><input type="text" name="surname" /><br />
    <label>Postcode:</label><input type="text" name="postcode" /><br />
    <label>Email:</label><input type="text" name="email" /><br />
    <input type="submit" name="submit" value="Send form" />
    <input type="reset" name="reset" value="Reset" />
</fieldset>
</form>


<script type="text/javascript">
function validateForm() {
    var form = document.forms['inputForm'];
    var formats = {
        First_name: /^[a-z]+[\-`\s]?[a-z]+$/i, 
        Surname: /^[a-z]+[\-`\S]?[a-z]+$/i, 
        Postcode: /^\d{4}$/, 
        Email:/^w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/ 
    };

    var elCount = form.elements.length;
    for(var i = 0; i <elCount; i++) {
        var field = form.elements[i];
        if(field.type == 'text') {
            if(!formats[field.name].test(field.value)) {
                alert('Invalid '+field.name.replace('_', ' '));
                field.focus();
                return false;
            }
    }
}
}
</script>
</body>
</html>

コードでエラーが発生する理由を理解しようとしている皆さん:underfinded formats[fields.Name] しかし、それは定義されています。単純なフォームなので、何が間違っているのかわかりません。初歩的な質問で申し訳ありませんが、何度も見直しましたが見当たりません。乾杯。

4

1 に答える 1

0

あなたが話しているエラーがこの行にあると仮定します:

if(!formats[field.Name].test(field.value)) {

「name」プロパティで小文字の「n」を使用することをお勧めします。

if(!formats[field.name].test(field.value)) {

JavaScript では大文字と小文字が区別されます。

更新: 既に述べたことに加えて、まだ大文字と小文字の区別に関して、formatsオブジェクトには大文字と小文字が混在するプロパティ名があります (例: ) First_name。ただし、対応する入力要素にnameは小文字の属性があるname="first_name"ため、要素のnameそれを使用してプロパティを検索しようとすると、formatsが返されundefinedます。それらを一致させる必要があります。

これらのエラーを修正すると動作します: http://jsfiddle.net/M4Nzr/

于 2013-03-05T13:22:34.407 に答える