需要结合JavaScript实现表单验证,要求如下: 1、邮箱账号。非空,设只能由英文字母、汉字、数字组成、下划线组成,且不能以数字开头。 2、昵称。非空。 3、生日。月份选择及日期选择级联,如选择 2 月,则先判断当前年份是否是闰年,如果为闰年,则在日期下拉框中加载 1-29,供选择,否则加载 1-28 供选择。 4、性别。选择性别的两个 radio 应该为一组,即互斥。 5、密码。非空,6-16 个字符,且不能为 9个以下(含 9)的纯数字。 6、确认密码。应与“密码”项一致。 7、所在地。点击省的“选择”按钮,显示省份列表图层(原已隐藏),并动态加载省份列表;选择“市”的“选择”按钮,显示城市列表图层(原已隐藏),并采用 JavaScript 据前面选择的省份名称,动态加载该省份下的城市列表,供选择。 8、提交。如果页面上的所有验证均已通过,则将数据向服务器端提交,服务器端采用Jsp 实现一段模拟程序,模拟此处的业务逻辑,接收此处提交的数据,并进一步验证及操作,然后给出相应的成功或失败提示。
时间: 2024-03-27 13:34:50 浏览: 120
这是一个较为复杂的表单验证,需要使用JavaScript来实现。以下是具体的实现步骤:
1. 对邮箱账号进行验证,可以使用正则表达式来判断。代码如下:
```
function checkEmail() {
var email = document.getElementById("email").value;
var reg = /^[a-zA-Z_\u4e00-\u9fa5][a-zA-Z0-9_\u4e00-\u9fa5]*@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (email == "") {
alert("邮箱账号不能为空!");
return false;
} else if (!reg.test(email)) {
alert("邮箱账号格式不正确!");
return false;
} else {
return true;
}
}
```
2. 对昵称进行验证,同样可以使用正则表达式判断。代码如下:
```
function checkNickname() {
var nickname = document.getElementById("nickname").value;
if (nickname == "") {
alert("昵称不能为空!");
return false;
} else {
return true;
}
}
```
3. 对生日进行验证,需要判断当前年份是否为闰年,然后根据选择的月份动态加载日期下拉框中的选项。代码如下:
```
function checkBirthday() {
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
// 判断是否为闰年
var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
// 动态加载日期下拉框中的选项
var daysInMonth = [31, isLeapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var options = "";
for (var i = 1; i <= daysInMonth[month - 1]; i++) {
options += "<option value='" + i + "'>" + i + "</option>";
}
document.getElementById("day").innerHTML = options;
}
```
4. 对性别进行验证,需要将选择性别的两个radio设置为一组,即互斥。代码如下:
```
function checkGender() {
var male = document.getElementById("male");
var female = document.getElementById("female");
if (!male.checked && !female.checked) {
alert("请选择性别!");
return false;
} else {
return true;
}
}
```
5. 对密码进行验证,需要判断密码的长度和是否为纯数字。代码如下:
```
function checkPassword() {
var password = document.getElementById("password").value;
if (password == "") {
alert("密码不能为空!");
return false;
} else if (password.length < 6 || password.length > 16) {
alert("密码长度应为6-16个字符!");
return false;
} else if (/^\d{1,9}$/.test(password)) {
alert("密码不能为9个以下的纯数字!");
return false;
} else {
return true;
}
}
```
6. 对确认密码进行验证,需要判断确认密码是否与密码一致。代码如下:
```
function checkConfirmPassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
if (confirmPassword == "") {
alert("确认密码不能为空!");
return false;
} else if (password != confirmPassword) {
alert("确认密码与密码不一致!");
return false;
} else {
return true;
}
}
```
7. 对所在地进行验证,需要动态加载省份列表和城市列表。代码如下:
```
function loadProvinces() {
// 动态加载省份列表
// ...
}
function loadCities(province) {
// 根据选择的省份动态加载城市列表
// ...
}
function checkLocation() {
var province = document.getElementById("province").value;
var city = document.getElementById("city").value;
if (province == "" || city == "") {
alert("请选择所在地!");
return false;
} else {
return true;
}
}
```
8. 对提交按钮进行验证,需要判断所有表单项是否已经通过验证。代码如下:
```
function submitForm() {
if (!checkEmail() || !checkNickname() || !checkGender() || !checkPassword() || !checkConfirmPassword() || !checkLocation()) {
return false;
} else {
// 向服务器端提交数据
return true;
}
}
```
以上是实现表单验证的基本步骤,具体实现还需要根据具体需求进行调整。
阅读全文