Question

例如在这个例子中;

<form>
    <input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
    <input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
    <input type="submit" id="sidebarformsubmit" value="Submit">
</form>

是否有可能以某种方式/某处能够识别出用户在电子邮件或电话号码字段中输入的内容。因此，在提交时，它不显示＆＃34;这是必需的＆＃34;。

Reword：至少有一个表单输入是必需的，两者都允许，因为它们是一个或另一个但不是唯一的。在以上示例中，用户需要具有至少一种形式的通信，无论是电话号码还是电子邮件。然而，他们可以同时拥有，但不能。

如果是这样，你会怎么做？

Answer 1

您可以轻松地从输入捕获更改事件并相应地设置所需的属性。像这样：

var email = document.getElementById('useremail'),
    phone = document.getElementById('userphone');
function onchange(){
    email[phone.value?'removeAttribute':'setAttribute']('required','required');
    phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);

jsfiddle

Answer 2

是否有可能以某种方式/某处能够识别出用户在电子邮件或电话号码字段中输入的内容。因此，在提交时，它不会显示＆＃34;这是必需的＆＃34;。

1）否。如果您在字段上使用HTML5 required，则需要字段。没有办法指定相互依赖。

2）是的。您可以使用客户端javascript验证，通常挂钩到表单submit事件，以执行复杂即用的验证。如果您未通过验证，请通过从事件处理程序返回false来阻止提交。

3）是的。当您收到提交的表单时，您可以在服务器上进行必要的复杂验证，如果出现错误则直接返回表单。

3b）你必须在服务器上进行验证，即使你有很好的客户端javascript验证，否则我会从你的网站购买一分钱。您必须不信任客户。

表单是否有一种方法只能识别一个必填字段

2 个答案:

jsfiddle