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

1

我想你正在寻找这样的东西：

var length = $('#stn').val().length;
if( length != 7 ){
    $('#name').html('Student Number should be 7 digits if it not follwed by x');
}else if(length < 6){
    var firstChar = $('#stn').val().value.charAt(0);
    if(firstChar != 'x' && firstChar != 'X'){
         $('#name').html('error message');
    }
}

但是像这样第二个条件永远不会是真的，我想你想要这个：

    var length = $('#stn').val().length;
    if(length < 6){
        var firstChar = $('#stn').val().value.charAt(0);
        if(firstChar != 'x' && firstChar != 'X'){
             $('#name').html('error message');
        }
    }else if( length != 7 ){
        $('#name').html('Student Number should be 7 digits if it not follwed by x');
    }
于 2013-11-08T18:29:08.827 回答
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的 regex 实用程序，你可以大大缩短它：

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 回答