使用JavaScript驗證文本字段和復選框

Question

我正在嘗試使用完整的“驗證表單”功能。 我只缺少兩件事：

1. 將“名稱”字段限制為僅字母字符和空格
2. 要驗證是否至少選中了一個復選框，並且允許最多7個復選框

這是到目前為止我得到的...復選框驗證似乎被繞過了，我不確定是否是因為我沒有在“ onSubmit”中調用該函數...。這就是為什么我要擁有“一個”完整的代碼，

至於名稱驗證，我不確定如何將這段代碼放在validateform3函數內，或者至少將其與表單相關聯，復選框驗證也是如此。

名稱驗證JS

function englishonly(inputtxt)
{   
    var letters = /^[A-Za-z]+$/;  
    if(inputtxt.value.match(letters))  
    {    
        return true;  
    }
    else  
    {  
        alert('Please type your name in english');  
        return false;  
    }  
} 

JAVASCRIPT

<script type="text/javascript">
    function validateForm3() {                      
        if (studentid.value == "")
        {
            studentid.style.borderColor = '#ff0000';
            alert("Please enter your Student ID");
            studentid.focus();
            return false;
        }

        var x=document.forms["form3"]["studentid"].value;
        if (! /^[0-9]{11}$/.test(x)) {
            studentid.style.borderColor = '#ff0000';
            studentid.style.backgroundColor = "#fdf0af";
            alert("The Student ID you entered is incorrect.");
            return false;
        }

        if (Email.value == "")
        {
            Email.style.borderColor = '#ff0000';
            alert("Please enter your e-mail");
            Email.focus();
            return false;
        }
        var x=document.forms["form3"]["Email"].value;
        if (x.indexOf("@")=== -1)
        {
            Email.style.borderColor = '#ff0000';
            Email.style.backgroundColor = "#fdf0af";
            alert("Please enter a valid email");
            return false;
        }

        if (Name.value == "")
        {
            Name.style.borderColor = '#ff0000';
            alert("Please enter your Name in English");
            Name.focus();
            return false;
        }                                       
    }
</script>

<script type="text/javascript">
    $(document).ready(function () {    
        $("#Regestir").click(function () {
            var numberOfChecked = $('input:checkbox:checked').length;
            // $.isNumeric( $("#studentid").val() )
            if( $("#studentid").val()!="" && $("#studentid").val()!="" && $("#Email").val()!="" &&  $("#Name").val()!="")
            {                                       
                if (numberOfChecked == 0 || numberOfChecked>7)
                {
                    alert("Only 7 courses are allowed.");
                    $("form").submit(function(e){
                        e.preventDefault();
                    });
                }
                else
                    $("form").unbind('submit').submit();
                    //$("#form3").submit();                
            }
            else 
            {
                alert ("You should enter all form values");
                $("form").submit(function(e){
                    e.preventDefault();
                });
            }
        });
    });
</script>

的HTML

<form action="connect.php" method="get" id="form3" 
      name="form3" onsubmit="return validateForm3()">

Answer 1

要獲取已選中復選框的總數，請替換您的

var numberOfChecked = $('input:checkbox:checked').length;

與

var numberOfChecked = $('input:checkbox[name=type]:checked').length;

關於您的名稱驗證englishonly函數的問題，您可以直接在validateform3函數中調用它。 如果該函數的代碼來自其他文件，則必須包含該js文件。 然后您的代碼可以如下所示：

function validateform3(){
    // ....
    var valid_english_name = englishonly($('#name')); // or whatever your 'name' input ID is
}

附帶說明，如果由於某些驗證錯誤而要取消表單提交，則可以僅使用e.preventDefault(); 或return false; 無需重新綁定submit事件處理程序。

此外，像碼studentid.value和Email.value將可能無法正常工作。 由於您正在使用jquery，因此可以將它們替換為jquery 選擇器 。

希望這可以幫助。

Answer 2

這里有一個FIDDLE讓你思考的問題。

JS

var inputname, length1, length2, checkboxcount = 0;
$('.clickme').on('click', function () {
    inputname = $('.myname').val();
    length1 = inputname.length;
    length2 = inputname.replace(/[^a-zA-Z\s]/gi, '').length;
    if (length1 != length2)
       {
        $('#errorspan').append('Only letters are allowed in a name');
        validname = 0;
        }
    else
      {
       validname = 1;
       }
    $('.checkme').each(function(){
        if( $(this).is(':checked') )
        {
         checkboxcount = checkboxcount + 1;
        }
    });
    if(checkboxcount < 1)
    {
             $('#errorspan').append('At least one checkbox must be checked');
             validbox = 0;
    }
    else if(checkboxcount > 6)
    {
             $('#errorspan').append('No more than 6 checkboxes can be checked');
             validbox = 0;
    }
    else{
         validbox = 1;
    }

  if (validname === 1 && validbox == 1)
     {
      alert("Everything Valid");
      }
  else
    {
     alert("Not Valid! You have work to do!");
     }
});