Question

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

<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">

在sampleButton.click中，检查是否选择了option1或2，相应地验证输入

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

1 个答案: