Question

我已经尝试过第一次java脚本验证，我已经单独完成了每个字段，当涉及到多个字段时，它不起作用，当我验证任何人可以帮助我时需要遵循哪些步骤？

    <script type="text/javascript">

    function  validation(){

    var nameval1=0;
    var nameval2=0;
    var nameval3=0;
    var myname=document.getElementById("myname").value;
    var password=document.getElementById("password").value;
    var male=document.getElementById("male").value;
    var female=document.getElementById("female").value;

    // text box validation
    if(myname==""){
        alert("please enter name");
        nameval1=nameval1+1;
    }else{

         nameval1=0;
         }

        if(password==""){
        alert("please enter password");
        nameval2=nameval2+1;
    }else{

         nameval=0;
         }
    // gender validation
    if(male=="" && female==""){

        alert("please choose gender");
        nameval3=nameval3+1;
    }else{

         nameval3=0;
         }
    // returning value
    if((nameval1)!=0 && (nameval3)!=0 &&(nameval3)!=0){
        return false;
    }else
    {
        return true;
    }


    </script>

     </HEAD>

     <BODY>
     <form action="https://www.youtube.com" name=" " onSubmit=" return validation()">

    <fieldset>
    <label>Validation Form
        Name :      <input type="text"  name="name" id="myname"></br>

        Password : <input type="password" name="password" id="password"></br>

               <input type="radio" id="male" name="gender"> Male
               <input type="radio" id="female" name="gender"> Female
               </br>

        <input type='submit'  value='mysubmit'>
    </label>
    </fieldset>

     </form>

Answer 1

var myname=document.getElementById("myname").value;
var password=document.getElementById("password").value;
var male=document.getElementById("male").checked;
var female=document.getElementById("female").checked;
var flag = true;

// text box validation
    if(myname==""){
        alert("please enter name");
        flag = false;
    }
   else if(password==""){
        alert("please enter password");
        flag =false;
    }
   else if(male==false && female==false){
        alert("please choose gender");
        flag = false;
    }
    // returning value
    if(flag){
        return true;
    }else
    {
        return false;
    }

<强> JS Fiddle

Answer 2

使用preventDefault并检查空值/点击的无线电，可以使用更少的代码执行此操作：

$("input[type=submit]").click(function(e){

  if($("#myname").val() == ""){
    e.preventDefault();
    alert("Name cant be empty")    
  }

  if($("#password").val() == ""){
    e.preventDefault();
    alert("Password cant be empty")    
  }

  if(!$("input[type=radio]").is(":checked")){
    e.preventDefault();
    alert("Gender cant be empty")    
  }

 });

FIDDLE

Answer 3

为什么你自己让事情变得复杂......除非你要验证字段的数据，否则不要使用javascript验证。如果只关心这些领域必须是强制性的.. 您可以使用标记的required = "required"属性。

所有浏览器都支持它......

Answer 4

jmore009已经给出了一个很好的答案，但它有一些问题。

这是better FIDDLE，作为jmore009解决方案的更新。

$("input[type=submit]").click(function(e){

  if(!$("#myname").val().trim()){
    e.preventDefault();
    alert("Name can't be empty")    
  }

  if(!$("#password").val().trim()){
    e.preventDefault();
    alert("Password can't be empty")    
  }

    if(!$("input[type=radio]").is(":checked")){
    e.preventDefault();
    alert("Gender can't be empty")    
  }

});

如果您不知道，请在</body>标记之前添加脚本。否则，由于加载时间不同，JavaScript可能找不到必要的DOM元素。

javascript表单验证错误

4 个答案: