写一个包含姓名 性别 证件下拉列表 身份证号 密码 手机号的一个表单完成提交对输入的数据进行校验非法输入给出提示 性别是单选框
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<p><label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br></p>
<p><label for="idType">证件类型:</label>
<select id="idType" name="idType">
<option value="1">身份证</option>
<option value="2">护照</option>
<option value="3">驾驶证</option>
</select><br><br></p>
<p><label for="idNumber">证件号码:</label>
<input type="text" id="idNumber" name="idNumber"><br><br></p>
<p><label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br></p>
<p><label for="phoneNumber">手机号:</label>
<input type="text" id="phoneNumber" name="phoneNumber"><br><br></p>
<input type="submit" value="提交">
</form>
<script>
const form = document.querySelector('form');
const name = document.getElementById('name');
const gender = document.getElementsByName('gender');
const idType = document.getElementById('idType');
const idNumber = document.getElementById('idNumber');
const password = document.getElementById('password');
const phoneNumber = document.getElementById('phoneNumber');
form.addEventListener('submit', function(e) {
e.preventDefault();
// 校验姓名
if (name.value === '') {
alert('姓名不能为空!');
return;
}
// 校验性别
let selectedGender = '';
for (let i = 0; i < gender.length; i++) {
if (gender[i].checked) {
selectedGender = gender[i].value;
break;
}
}
if (selectedGender === '') {
alert('请选择性别!');
return;
}
// 校验证件号码
if (idNumber.value === '') {
alert('证件号码不能为空!');
return;
}
// 校验密码
if (password.value === '') {
alert('密码不能为空!');
return;
}
// 校验手机号
if (phoneNumber.value === '') {
alert('手机号不能为空!');
return;
}
const phoneRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!phoneRegex.test(phoneNumber.value)) {
alert('手机号格式不正确!');
return;
}
// 提交表单
form.submit();
});
</script
原文地址: http://www.cveoy.top/t/topic/egkf 著作权归作者所有。请勿转载和采集!