HTML表单能否设置多重校验？如何实现姓名及指定后缀邮箱校验需求

1. 多input同字段的写法问题 #

你这种为同一个字段写多个<input>标签的写法是错误的，完全无法达到预期效果，还会引发多个问题：

• HTML要求id属性全局唯一，重复id会导致页面样式、JS选择器、label关联等功能异常
• 多个同name的文本输入框提交表单时，会把所有输入框的值都提交到后台，而不是合并为同一个字段的值
• 多个校验规则分开写在不同input上，各自只会校验对应输入框，根本不会作用在同一个字段上

正确做法是：所有原生校验属性可以直接写在同一个<input>标签上，多个规则会同时生效。

2. name字段正确实现 #

你需要的必填、首字母大写、长度3-30的要求，可以直接用以下代码实现：

<div class="input-field">
  <input type="text" id="name" name="name" class="form-control validate" required pattern="^[A-Z][a-zA-Z]{2,29}$">
  <label for="name">Name <span class="red-text"> *</span></label>
</div>

这里的正则^[A-Z][a-zA-Z]{2,29}$的规则说明：

• ^[A-Z] 要求首字符必须是大写字母
• [a-zA-Z]{2,29} 要求后续可以跟2-29个大小写字母，总长度刚好为3-30
• required 属性保证字段必填

3. 指定后缀邮箱校验实现 #

仅允许@gmail.com和@yahoo.com后缀的邮箱校验，可以用以下input代码：

<input type="email" name="email" required pattern="^[a-zA-Z0-9._%+-]+@(gmail|yahoo)\.com$">

这里的正则说明：

• [a-zA-Z0-9._%+-]+ 匹配邮箱前缀，支持通用的邮箱允许字符
• @(gmail|yahoo)\.com$ 限制后缀只能是@gmail.com或者@yahoo.com，如果你不需要带.com后缀，直接改成@(gmail|yahoo)$即可

注意事项 #

HTML原生校验只是前端友好提示，不能作为安全校验，后端接收数据时必须再做一遍相同规则的校验，避免用户绕过前端校验提交非法数据。

内容的提问来源于stack exchange，提问作者JustAsking