Question

我有一个表单，顶部有一个option元素，一个电子邮件字段。

<form class="form-versenden" action="mainVersendet.php" method="post" name="send">
    <div class="form-group">
        <h4>Bitte tragen Sie die folgenden Daten ein</h4>
        <div class="form-group">
            <label for="versandart">Versandart</label>
            <select class="form-control" id="versandart" name="versandart" autofocus>
                <option value="both">E-Mail und Druck</option>
                <option value="onlyEmail">Nur E-Mail</option>
                <option value="onlyPrint">Nur Druck</option>
            </select>
        </div>
        <div class="form-group">
            <label for="email">E-Mail</label>
            <input type="email" class="form-control" id="email" placeholder="email" name="email">
        </div>
        <button class="btn" type="submit">Versenden</button>
    </div>
</form>

根据用户的选择，我必须检查在“ both”和“ onlyEmail”两种情况下是否都输入了电子邮件地址。因为在所有3种情况下都不要求使用电子邮件，所以我不能在电子邮件字段中使用HTML的必需元素。因此，我尝试像这样在Submit事件上对其进行测试：

 document.querySelector('form[name="send"]').addEventListener("submit", validateFields);

function validateFields(){
    var versandart = document.getElementById("versandart");
    var email = document.getElementById("email");     

    if (versandart.value == 'both' || versandart.value == 'onlyEmail'){
        if(email.value == ''){
            email.setCustomValidity('EMail muss eingegeben werden');
            return false;
        }else if(CHECK HERE if Mail is not correct){
            email.setCustomValidity('EMail format is not correct');
            return false;
        }else{
            //in this case email is not empthy and is correct
            return true;
        }
    }
}

但是这不起作用，因为我覆盖了标准HTML检查中的有效电子邮件地址。因此，我必须在“如果邮件不正确，请点击此处”的位置再次进行检查。

我该怎么做，这是正确的方法吗？还是如果所选的值适合前两种情况，我应该在versandart字段中添加onchangelistener并将必需的标签添加至email字段吗？

Answer 1

在其他情况下，请使用isEmail()函数，如下所示：

else if(email.value.isEmail()) {
    return true;
    // Now the form will get submitted to the PHP script.
}

string.isEmail()如果输入的模式与电子邮件地址匹配，则返回true，否则返回false。

但是，请不要忘记进行服务器端表单验证。如果破解者关闭了JavaScript，那么仅在您进行JavaScript验证的情况下，它们可能会在您的系统中造成混乱-特别是因为您显然无法使用必需的HTML属性进行电子邮件输入。

使用JS onsubmit验证html表单

1 个答案: