如何根据Radio Button获得正确的验证

时间:2015-11-29 14:51:12

标签: javascript jquery html

$(document).ready(function(){
    var form = $("#Form-3");
    var FName = $("#fname"); //Creates Variables for elements in form
    var Tele = $("#tele"); 
    var Address = $("#address");
    var Email = $("#email");
    var Credit = $("#Card")
    var regexp = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9.]+.[a-z]{2,4}$/; //ragex code- used to validate email 
    

    
    FName.blur(validateFName);  //blur is a method which attaches a functiom to run when an event occurs
    Email.blur(validateEmail); 
    Tele.blur(validateTele);
    Address.blur(validateAddress);
    Credit.blur(validateCard);
 

    form.submit (function(){
        
        if (validateFName() & validateTele() & validateEmail() & validateAddress() & validateCard()){ //If it passes all of these then return true 
            
        return true;    
    }
        else  {
                return false;        
              }

       
        });
        function validateCard(){    //Validates Credit Card 
      var Visa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;                //Ragex code for Credit Cards 
      var MasterCard = /^(?:5[1-5][0-9]{14})$/; 
      var CC = Credit.val();
       
    $("#Visa").click(function() {             //Tick Radio Button
    $("#Card").show(); 
      if (Visa.test(CC) ){   // If user input is equal to both Visa Or Mastercard Then Valid 
        document.getElementById("CardError").textContent ="";
        return true;
       }
    }); 
        
    $("#Master").click(function() {       //Checks MasterCard button. 
    $("#Card").show();
     if(MasterCard.test(CC)){
        document.getElementById("CardError").textContent =""; //Display Error
         return true;
    } 
     else {
        document.getElementById("CardError").textContent ="Please Ensure Card Detail Is Correct"; //Display Error
        return false;
    }
});
}

});
  
    <label for="Card">Credit Card (16 Digit Number)</label>
    <br/>
    <input type="radio" id="Visa" name="Type1">
    <label>Visa</label>
    <br/>
    <input type="radio" id="Master" name="Type1">
    <label>MasterCard</label>
    <input id="Card" name="Card" type="text" hidden="true" />
    <label id="CardError"></label>

在这里我有两个收音机按钮一个用于Visa卡而另一个用于万事达卡我想要它当用户点击签证单选按钮时只有签证验证工作而不是万事达卡号反之亦然,现在什么也没发生,但是我可以当用户点击Visa或万事达卡时,两个验证都适用,即当选择万事达卡无线电按钮时,Visa验证工作正常。我怎样才能将其专门设置为一种验证形式?

1 个答案:

答案 0 :(得分:0)

JavaScript中有错误。更改脚本的这一部分:

    }
});
else {
    document.getElementById("CardError").textContent ="Please Ensure Card Detail Is Correct"; //Display Error
    return false;
}

对此:

    } else {
        document.getElementById("CardError").textContent ="Please Ensure Card Detail Is Correct"; //Display Error
        return false;
    }
});

<强>段

function validateCard() { //Validates Credit Card 
  var Visa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/; //Ragex code for Credit Cards 
  var MasterCard = /^(?:5[1-5][0-9]{14})$/;
  var CC = Credit.val();

  $("#Visa").click(function() { //Tick Radio Button
    $("#Card").prop("hidden", false).removeAttr("hidden");
    console.log("Hi");
    if (Visa.test(CC)) { // If user input is equal to both Visa Or Mastercard Then Valid 
      document.getElementById("CardError").textContent = "";
      return true;
    }
  });
  $("#Master").click(function() { //Checks MasterCard button. 
    $("#Card").show();
    if (MasterCard.test(CC)) {
      $("#CardError").text(); //Display Error
      return true;
    } else {
      $("#CardError").text("Please Ensure Card Detail Is Correct"); //Display Error
      return false;
    }
  });
}

validateCard();
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<label for="Card">Credit Card (16 Digit Number)</label>
<br/>
<input type="radio" id="Visa" name="Type1">
<label>Visa</label>
<br/>
<input type="radio" id="Master" name="Type1">
<label>MasterCard</label>
<input id="Card" name="Card" type="text" hidden="true" />
<label id="CardError"></label>