如何为奥本大学邮箱配置HTML5 pattern属性验证规则

要实现仅允许输入XXXXX@auburn.edu格式的邮箱，只需完善input标签的pattern属性，确保匹配完整的邮箱结构：

修改后的核心输入框代码：

<input type="text" class="form-control" id="student_email" name="student_email" placeholder="XXXXX@auburn.edu" required pattern="^[a-zA-Z0-9]{5}@auburn\.edu$">

正则规则拆解： #

• ^：限定输入内容必须从这里开始，避免前缀前出现多余字符
• [a-zA-Z0-9]{5}：匹配5位大小写字母或数字组成的前缀部分
• @auburn\.edu：匹配固定后缀@auburn.edu，注意.在正则中是特殊字符，必须用\转义才能匹配实际的点号
• $：限定输入内容必须在这里结束，避免后缀后出现多余字符

设置完成后，用户输入不符合格式的内容时，HTML5原生验证会阻止表单提交并提示错误。

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