首页 > 文章资讯 > 站长教程 > 建站知识 > 网站用户提交姓名和电话号码表单验证JS

网站用户提交姓名和电话号码表单验证JS

时间：2023年11月28日

来源：网络

编辑：佚名

网站一个用户留信息的表单，功能是表单有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>

新闻资讯更多

猜你需要