网站一个用户留信息的表单,功能是表单有2个字段一个是姓名,一个是电话号码,用户提交表单后,JS验证姓名字段是否为空,电话号码字段验证填写的是不是电话号码格式。
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">电话号码:</label>
<input type="tel" id="phone" name="phone">
<br>
<input type="submit" value="提交">
</form>
<script>
const nameInput = document.getElementById('name');
const phoneInput = document.getElementById('phone');
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
if (nameInput.value === '') {
alert('姓名不能为空');
event.preventDefault();
} else if (!phoneInput.value.match(/^\d{11}$/)) {
alert('电话号码格式不正确');
event.preventDefault();
} else {
// 验证通过,表单数据可以被提交到服务器端进行处理
}
});
</script>