0

Jquery を使用して HTML テキスト ボックスを検証したかった...そのテキスト ボックスでは、長さが 6 の場合は数字のみを受け入れたいと考えていました。長さが 7 の場合は、先頭にアルファベット X を含める必要があります。

<input type="text" class="stid" id="stn" name="stn"  maxlength="7" placeholder="Number should be 7 digits followed by letter X" required>

Javaスクリプトを使用してアプリケーションを試してみましたが、JQueryを使用して実装する方法は問題ありません。私のJavaScriptコード

var textBox = document.getElementById("stn");
    var textLength = textBox.value.length;
    if((textLength < 7 || textLength > 7))
    {
    document.getElementById("name").innerHTML="Student Number should be 7 digits if it not follwed by x";
    return false;
    }
    else{
    if((textLength < 6 ))
    {
    //<!--to check the first letter is x in student number-->
    var firstChar = document.getElementById("stn").value.charAt(0);
    if( firstChar !== "x" && firstChar !== "X")
    {
                                                                                            document.getElementById("name").innerHTML="error message,";
        return false;
    }
    }
    }

これをJqueryで実装する方法は?

4

2 に答える 2

0

ポイントを作るためにコードを投稿します。Toni の答えは、必要なものすべてであり、はるかに効率的にコーディングされています。「jQueryへの移植」と「適切なコーディング」を区別するために、ロジックを翻訳してより簡潔にするものではないため、投稿しています。トニの答えは両方を行います。jQueryを使用して、正確なロジックを表示します。

var textBox = $("#stn");
var textLength = textBox.val().length;
if((textLength < 7 || textLength > 7))
{
    $("#name").html("Student Number should be 7 digits if it not follwed by x");
    return false;
} 
else
{
    if((textLength < 6 ))
    {
        //<!--to check the first letter is x in student number-->
        var firstChar = $("#stn").val().charAt(0);
        if( firstChar !== "x" && firstChar !== "X")
        {
            $("#name").html("error message,");
            return false;
        }
    }
}

私の場合でも、スペースを修正してコードを整理しました。私が言いたいのは、jQuery が必ずしも多くのことをしてくれるわけではないということです。

JavaScriptの正規表現ユーティリティを利用したい場合は、これを大幅に短縮できます。

var val = document.getElementById("stn").value;
if (!val.match(/[xX]?[0-9]{6}/)) {
    document.getElementById("name").innerHTML = "Student number should be 6 digits with an optional x or X in front";
    return false;
}

これを jQuery で書き直すと、違いはほとんどありません。

var val = $("#stn").val();
if (!val.match(/[xX]?[0-9]{6}/)) {
    $("#name").html("Student number should be 6 digits with an optional x or X in front");
    return false;
}

}
于 2013-11-08T18:46:46.813 に答える