0

さまざまなフィールド値を検証し、正しいフィールドと一緒にエラー メッセージを出力するために使用できる汎用 Javascript 関数を作成しようとしています。効率的で再利用可能な関数を作成したいのですが、Javascript は初めてで、どうすればよいかわかりません。

検証機能を変更して両方を検証する方法についてアドバイスしてfirstnameいただけれlastnameば幸いです。

これまでの私のコード:

function validateForm() {
    var x = document.forms["myForm"]["firstname"].value;
    var reg_azs = /^[^a-zA-Z\-']+$/;
    var reg_oal = "!#$%^&*()+=[]\\\';,{}|\":<>?123456790";

    if (x == null || x == "") {
        document.getElementById("fn").innerHTML = "This fuild is required.";
        return false;
    } else if (reg_azs.test(firstname.value)) {
        document.getElementById("fn").innerHTML = "Only alphabetic letters.";
        return false;
    } else {
        for (var i = 0; i < x.length; i++) {
            if (reg_oal.indexOf(x.charAt(i)) != -1) {
                document.getElementById("fn").innerHTML = "Only alphabetic letters.";
                return false;
            }
        }
    } else {
        document.getElementById("fn").innerHTML = "correct";
        return true;
    }
}

私のフォーム:

<form name="myForm" action="connection.php" method="post">
    <label for='firstname'>First Name:</label>
    <input type="text" id="firstname" name="firstname" onchange="return validateForm()" />
    <err1 id="fn"></err1>
    <br>  

    <label for='lastname'>Last Name:</label>
    <input type="text" id="lastname" name="lastname" onchange="return validateForm()" />
    <err1 id="ln"></err1>
    <br>
</form>
4

1 に答える 1

1

関数がいくつかのパラメーターを受け入れるようにします。id検査されるid要素、エラー メッセージを表示する要素、そしてそれを検証するための正規表現の文字列 (オプションの場合もあります) です。

そこから、次のように設定できますx。

var x=document.getElementById(param1).value;

エラー要素を参照するたびに、次のようにします。

document.getElementById("fn")

次のように変更します。

document.getElementById(param2)

したがって、関数宣言は次のようになります。

function validateForm(param1, param2) {

これを呼び出すと、次のようになります。

onchange="return validateForm('firstname', 'fn');"
onchange="return validateForm('lastname', 'ln');"

等々。

おそらくパラメーター名も変更したいでしょうが、これparam1は単なる例であり、それぞれ と のparam2ようにするとよいでしょう。targetElemerrorLabel

アップデート：

この設計も偏狭で、validateForm検証するすべての要素を呼び出す必要があります。1 回の関数呼び出しで複数の要素を検証できるようにする別の方法は、オブジェクトの配列を使用することです。各オブジェクトは次のような形式です。

{"element_id": "whatever", "error_id": "whatever"}

ただし、関数では、単一のパラメーター (配列) をループし、次のようにそれぞれにアクセスします。

for (var i = 0; i < param1.length; i++) {
    // Use param1[i]["element_id"] and param1[i]["error_id"]
}

この場合、各オブジェクトに余分なものを追加して、空ではない、少なくとも特定の長さ、特定の長さを超えないなど、特定の検証ルールを許可できます。 ...そしてループでは、存在するものを確認する必要があります。

于 2012-09-16T22:38:29.037 に答える