html - 同时使用输入框html的pattern和required属性

Question

如何在 html 表单中使用必需属性的同时验证输入字段的模式。我想为每个属性制作 2 条不同的警告消息。

<div class="form-group">
                    <label class="col-md-4 control-label">E-Mail</label>  
                    <div class="col-md-4 inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                            <input name="email" placeholder="Địa chỉ E-Mail" class="form-control"  type="text" required 
                                   pattern=" /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/"
                                   oninvalid="this.setCustomValidity('Vui lòng nhập địa chỉ email')"
                                   oninput="setCustomValidity('')"/>
                        </div>
                    </div>
                </div>

有人有一个有效的正则表达式来检查有效的电子邮件吗？我在 Internet 上找到了正则表达式，但它不能正常工作

Answer 1

保持简单 :o) 除非你真的需要去使用 Constraint Validation API ，正如您目前正在做的那样，我会选择常规 Form Validation其中有 pretty good browser support .

基本上，当您在 input 元素上应用 required 属性时，它们将根据一些条件进行匹配。一是该字段不能留空。第二个是可选的 pattern。在您的情况下，您可以指定 type="email" 并且浏览器将匹配有效电子邮件地址的输入。据我所知，以下内容应该可以满足您的需求:

<form action="">
  <input type="email" required>
  <input type="submit">
</form>

使用正则表达式定义自定义模式的风险是您可能最终测试错误的模式。在您的情况下，即使它是有效的电子邮件地址，对 example@example.cancerresearch 的测试也会失败。