使用JavaScript验证文本字段和复选框

Question

我正在尝试使用完整的“验证窗体”功能。我唯一缺少的两件事情：

1. 要限制名称字段只字母字符和空格
2. 为了验证至少有一个复选框被选中，最大的7个复选框允许

这是我到目前为止...复选框验证似乎被绕过，我不确定是否因为我没有在“onSubmit”中调用函数....这就是为什么我想要“one”full code，

至于名称验证，我是不知道如何将此代码放置在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 selectors替换它们。

希望这会有所帮助。

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!"); 
    } 
});