根据选定的单选按钮验证文本框

Question

我有一个文本框和两个单选按钮，如 Ip 和域，我想根据所选的单选按钮验证文本框：

<body>
    <form action="" method="post">


        <input type="radio" id="ip" name="radio_options" value="option1">
        <label for="option1">IP</label><br>

        <input type="radio" id="domain" name="radio_options" value="option2">
        <label for="option2">Domain</label><br>
    <label for="required_later"></label>
        <input type="text" name="text_input_field"  id="required_later" disabled><br>

        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $("#ip").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
              $( "#required_later" ).attr("pattern",  "((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" );       


        });
        $("#domain").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
            $( "#required_later" ).attr("pattern",'/^(http(s)?\/\/:)?(www\.)?[a-zA-Z\-]{3,}(\.(com|net|org))?$/');

        });



    </script>


</body>

<body>
    <form action="" method="post">


        <input type="radio" id="ip" name="radio_options" value="option1">
        <label for="option1">IP</label><br>

        <input type="radio" id="domain" name="radio_options" value="option2">
        <label for="option2">Domain</label><br>
    <label for="required_later"></label>
        <input type="text" name="text_input_field"  id="required_later" disabled><br>

        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $("#ip").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
              $( "#required_later" ).attr("pattern",  "((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" );       


        });
        $("#domain").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
            $( "#required_later" ).attr("pattern",'/^(http(s)?\/\/:)?(www\.)?[a-zA-Z\-]{3,}(\.(com|net|org))?$/');

        });



    </script>


</body>

我想根据单选按钮验证文本框，假设我选择了 ip 地址文本框应该根据 ip 地址模式验证输入。

Answer 1

您可以在 jquery 中像这样获取所选单选按钮的值：

$("input[name=radio_options]:checked").val()

所以你可以这样做:

$("#ip").click(function() {
       $("#required_later").prop("required", true);
       $("#required_later").prop("disabled", false);
   });
   $("#domain").click(function() {
       $("#required_later").prop("required", true);
       $("#required_later").prop("disabled", false);
   }); 
 
 $("#sampleButton").click(function() {
      if($("input[name=radio_options]:checked").val() == "option1"){
        const reg = /((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$/
        if((reg.test($("#required_later").val())) == false){
          alert("Your Ip should contain ... ")
        }
      }else{
        const reg = /^(http(s)?\/\/:)?(www\.)?[a-zA-Z\-]{3,}(\.(com|net|org))?$/
        if((reg.test($("#required_later").val())) == false){
          alert("Your Domain should contain ... ")
        }
      }
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="ip" name="radio_options" value="option1">
   <label for="option1" id="option1">IP</label><br>

   <input type="radio" id="domain" name="radio_options" value="option2">
   <label for="option2" id="option2">Domain</label><br>
<label for="required_later"></label>
   <input type="text" name="text_input_field"  id="required_later" disabled><br>

   <input id="sampleButton" type="submit" name="submit" value="Submit">

In the sampleButton.click you check if option1 or 2 is selected and validate the input accordingly

根据选定的单选按钮验证文本框

Validation of text box according to selected radio button

javascript

jquery

textbox

radio-button