如何验证两个单选按钮，用户应该选择两个单选按钮中的任何一个（电子邮件或电话）答案

【问题标题】：How to validate two radio buttons, user should be to select any of the two radio button(Email or Phone)如何验证两个单选按钮，用户应该选择两个单选按钮中的任何一个（电子邮件或电话）
【发布时间】：2020-12-28 15:00:20
【问题描述】：

如何验证两个单选按钮，用户应该能够选择两个单选按钮（电子邮件或电话）中的任何一个，然后会出现文本框字段。如果用户选择任何一个单选按钮，我想使用 Javascript 验证字段（电话或电子邮件）。

这是我试过的！

function validation() 
{
var em = document.getElementById("eid").value.indexOf("@");
var ph = document.getElementById("ph").value;
if(em==-1) 
{  
alert("E-mail ID is not valid");
return false;
}
else if(ph==""||ph==null)
{
alert("Enter The Phone No");
return false;
}
else if(isNaN(ph)||ph.length>10||ph.length<10)
{
alert("The mobile no. always has 10 digit numerical value");
return false;
}
else{
alert("Your Information is Submitted Successfully");
}

</script>

         </tr>
         </html>

<html>
 <style>
#Phone:checked ~ .Phone
{
display:block;
}
#Email:checked ~ .Email
{
display:block;
}
</style>
 
 <tr>
            <td align="right">
               <label>Email</label>
            </td>
            <td align="left">
               <input type="radio" name="data" id="Email">
               <div class="Email" hidden>
                 <input type="text" id="eid" placeholder="Enter your Email" />
                </div>
            </td>
            <td align="right">
               <label>Phone</label>
            </td>
            <td align="left">
               <input type="radio" name="data" id="Phone">
               <div class="Phone" hidden>
               <input type="text" id="ph" minlength="1" maxlength="10" placeholder="Enter your phone number" />
               </div>
            </td>
            <input type='submit' name='submit' onclick="validation();" />
         </html>

【问题讨论】：

标签： javascript html

【解决方案1】：

当单击其中一个单选按钮时，文本 input 标记的隐藏值在其条件下变为 false/true。

let radio = document.querySelectorAll("input[name='data']");

function addEventListener(radio1, radio2) 
{
  radio1.onclick = function(e) 
  {
  let textInput = document.getElementsByClassName(e.target.id)[0];  
  let state = textInput.hidden ? false : true;
  textInput.hidden = state; 
  
  let otherInput = document.getElementsByClassName(radio2.id)[0];
  otherInput.hidden = true;
  }
  
}

addEventListener(radio[0], radio[1]);
addEventListener(radio[1], radio[0]);

function validation() 
{
var emHidden = document.getElementsByClassName("Email")[0].hidden;
var phHidden = document.getElementsByClassName("Phone")[0].hidden
var em = document.getElementById("eid").value.indexOf("@");
var ph = document.getElementById("ph").value;
if(em==-1 && !emHidden) 
{  
alert("E-mail ID is not valid");
return false;
} 
else if(!phHidden) 
{
  if(ph==""||ph==null)
  {
  alert("Enter The Phone No");
  return false;
  }
  else if(isNaN(ph)||ph.length>10||ph.length<10)
  {
  alert("The mobile no. always has 10 digit numerical value");
  return false;
  }

} 
alert("Your Information is Submitted Successfully");
}

<html>
 <tr>
            <td align="right">
               <label>Email</label>
            </td>
            <td align="left">
               <input type="radio" name="data" id="Email">
               <div class="Email" hidden>
                 <input type="text" id="eid" placeholder="Enter your Email" />
                </div>
            </td>
            <td align="right">
               <label>Phone</label>
            </td>
            <td align="left">
               <input type="radio" name="data" id="Phone">
               <div class="Phone" hidden>
               <input type="text" id="ph" minlength="1" maxlength="10" placeholder="Enter your phone number" />
               </div>
            </td>
            <input type='submit' name='submit' onclick="validation();" />
         </html>

【讨论】：

当我点击一个电话单选按钮时，电话验证没有发生，而是在询问电子邮件，用户也应该可以选择输入电话或电子邮件，然后相应地验证选择的单选按钮
@asher，因此在选择手机广播按钮并单击“提交”按钮时，验证功能应该触发，对吗？验证功能中的其他条件应该在每个条件上激活吗？
@Asher 编辑并检查 plz
请检查您的邮件。
当我点击手机时它工作正常，但当我点击电子邮件时它不工作。