Question

如何在html表单中使用required属性时验证输入字段的模式。我想为每个属性制作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>

任何人都有工作正则表达式检查有效的电子邮件？我发现互联网上的正则表达式但它无法正常工作

Answer 1

保持简单：o）除非你真的需要像你现在一样使用Constraint Validation API，否则我会定期Form Validation使用pretty good browser support。

基本上，当您在required元素上应用input属性时，它们将与一些条件匹配。一个是该领域不能留空。第二个是可选的pattern。在您的情况下，您可以指定type="email"，浏览器将匹配有效电子邮件地址的输入。至于我可以阅读您的请求，以下内容应该满足您的需求：

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

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

同时使用输入字段html的模式和必需属性

1 个答案: