在HTML 5中,不再使用XHTML 5作为验证器。相反,HTML 5本身具有内置的验证功能。可以使用HTML 5的required
和invalid
属性来指示表单字段是否必须包含值,并且表单提交时,可以使用JavaScript来验证这些字段是否符合要求。这种验证方法比XHTML 5的验证器更加灵活和方便。
以下是一个简单的HTML 5表单验证示例:
<form>
<input type="text" required>
<input type="email" required>
<input type="submit" value="Submit">
</form>
<script>
// 获取表单元素
var form = document.querySelector('form');
var input1 = document.querySelector('input[name="name"]');
var input2 = document.querySelector('input[name="email"]');
// 表单提交时验证输入字段是否为空
form.addEventListener('submit', function(event) {
if (input1.value.trim() === '' || input2.value.trim() === '') {
alert('请填写您的姓名和电子邮件地址。');
event.preventDefault();
}
});
</script>
在上面的示例中,表单提交时,JavaScript代码会验证name
和email
输入字段是否为空。如果输入字段为空,则弹出警告框,阻止表单提交。如果输入字段不为空,则继续提交表单。
云+社区技术沙龙[第6期]
云上直播间
云上直播间
云+社区开发者大会(北京站)
云+社区技术沙龙[第8期]
云+社区技术沙龙[第1期]
技术创作101训练营
云+社区技术沙龙[第12期]
DB-TALK 技术分享会
中国航空运输协会安保培训
领取专属 10元无门槛券
手把手带您无忧上云