效果图：
实验要求：
1.用户名输入框不可为空且必须符合要求，否则出现红色提示。
2.密码不能为空且必须符合要求，否则出现红色提示。
3.确认密码不能为空且必须符合要求，否则出现红色提示。
4.创建性别和生日下拉列表框，并且生日下拉列表框必须有闰年和闰月的判断。
5.创建个人介绍文本框。
6.创建三级下拉列表框。
不符合要求的情况如下图：
用户名和密码为空时：
用户名、密码和确认密码不符合要求时：
代码部分：
HTML代码：
<style>
span{color:red; font-weight: bold; display: none;}
</style>
</head>
<body>
<form name="form1">
用 户 名*：<input type="text" id="username" name="username" class="regex"/>九位有效字符，前三个只能输入字母（不区分大小写），后六位只能输入数字！
<span class="error">九位有效字符，前三个只能输入字母（不区分大小写），后六位只能输入数字！</span><br>
密 码：*<input type="password" id="pwd" name="pwd" class="regex"/>(8位有效数字)
<span class="error"></span><br>
确认密码*：<input type="password" id="c_pwd" name="c_pwd" class="regex" />
<span class="error"></span><br>
性别*：
<select id="xingbie" size="1">
<option value="0">男</option>
<option value="1">女</option>
</select><br>
生日：<select id="year" name="birthYear"></select>年
<select id="month" name="birthMonth"></select>月
<select id="data" name="birthDate"></select>日<br>
个人介绍：<br>
<textarea wrap="physical" name="jieshao" cols="40" rows="11"></textarea><br>
<input type="submit" id="sub" value="提交" onclick=fun()"/><input type="reset" value="重置" />
</form>
<form name="form3sel">
城市:
<select name="city" onchange="sel_school()">
<option value="0">选择城市...</option>//索引号0
<option value="北京">北京</option>//索引号1
<option value="天津">天津</option>//索引号2
<option value="上海">上海</option>//索引号3
</select>
学校:
<select name="school" onchange="sel_major()">
<option value="0">选择学校...</option>
</select>
专业:
<select name="major">
<option value="0">选择专业...</option>
</select>
</form>
<div id="show"></div>
</body>JS代码：
<script type="text/javascript" >
window.onload=function(){
var myTestBtn=document.getElementById("sub");//获取按钮对象
var myTestRegex=document.getElementsByClassName("regex");//通过regex类名，获取需要进行验证的输入框对象数组
var myError=document.getElementsByClassName("error");//通过error类名，获取验证出错需要对用户进行提示的数组对象
for(i=0;i<myTestRegex.length;i++){//对每个验证对象进行循环
myTestRegex[i].index=i;//给每个验证对象加索引值
myTestRegex[i].onblur=function(){//给每个验证对象加失去焦点事件
switch(this.index){
case 0:var reg=/^[A-Za-z]{1,3}\d{4,9}$/;//定义用户名的正则表达式
spaceError="用户名不能为空！";//用户名为空时的提示
regError="九位有效字符，前三个只能输入字母（不区分大小写），后六位只能输入数字！";//用户验证错误时，给出的提示字符串
testResult(this,reg,this.index,spaceError,regError)
break;
case 1:var reg=/^[0-9]{8}$/;//定义密码验证的的正则表达式
spaceError="密码不能为空！";//密码为空时的提示
regError="密码为8位有效数字";//密码验证错误时，给出的提示字符串
testResult(this,reg,this.index,spaceError,regError)
break;
case 2:
if(myTestRegex[2].value==""){
myError[2].style.display="inline";//显示提示内容
myError[2].innerHTML="确认密码不能为空!";
myTestRegex[2].date=1;//验证数据为1时，验证没通过
}
//进行密码与确认密码是否相同的验证
if(myTestRegex[1].value!=myTestRegex[2].value){
myError[2].style.display="inline";//显示提示内容
myError[2].innerHTML="密码与确认密码不相同！";
myTestRegex[2].date=1;//验证数据为1时，验证没通过
}
else{
myError[2].style.display="none";
}
break;
}
}
}
//验证函数，实参为：1.当前验证对象2.正则表达式3.索引值4.输入值为空时，提示字符串5.验证错误，提示字符串
function testResult(object,reg,index,spaceError,regError){
var value=object.value;//获取用户输入的值
var result=reg.test(value);//进行正则表达式的验证
if(value==""){
myError[index].style.display="inline";//为空时显示提示
myError[index].innerHTML=spaceError;//定义提示内容
object.date=1;//设置验证数据为1时，则验证没通过
}
else if(result){//不为空时，进行正则表达式的验证
myError[index].style.display="none";//通过，隐藏错误提示
object.date=0;//设置验证数据为0时，验证通过
}
else{//正则表达式没有通过
myError[index].style.display="inline";//显示错误提示
myError[index].innerHTML=regError;//设置错误提示内容
object.date=1;//表示验证没有通过
}
}
myTestBtn.onclick=function(){//单击提交按钮，进行所有输入数据的验证
total=0;//验证错误计数器
for(i=0;i<myTestRegex.length;i++){
myTestRegex[i].onblur();//激活表单每一个失去焦点事件
total+=myTestRegex[i].date;//累加错误计数器，都为0时表示验证通过
}
if(total>0)return false;//计数器大于0，表示有数据没有通过验证，不提交
else return true;//否则验证通过，提交用户输入的数据
}
}
//性别下拉列表
var xingbie=document.getElementById("xingbie");
xingbie.onchange=function(){
var index=xingbie.selectedIndex;//将性别数组中的值填充到性别下拉列表框中
}
//这个函数是为了增加select下拉框中的项目
var addoption = function(selectag,startData,endData,defaultData){
selectag.options.length = 0; //这是保证每次重新选择，页面重绘都会清除原来的option
for(var i = startData; i < endData+1; i++){
var option = document.createElement("option");
option.value = i;
option.innerText = i;
if(i == defaultData){
option.selected = "selected";
}
selectag.appendChild(option);
}
};
//这个函数是为了动态获取日期
function initBirthDate(birthDateSelect, year, month) {
var today = new Date(year, month, 0);
var lastDate = today.getDate();
addoption(birthDateSelect, 1, lastDate, 1);
};
//下面是取得该节点，然后调用上面的方法
var birthYear = document.getElementById('year');
var birthMonth = document.getElementById('month');
var birthDate = document.getElementById('data');
addoption(birthYear, 1990, 2022, 1998);
addoption(birthMonth, 1, 12, 1);
initBirthDate(birthDate, 2000, 1);
//以下两个函数是为了处理当option的值改变时，能正确的将选中的年和月传入
//initBirthDate()，然后重新确定日期的范围
year.onchange = function(event){
var years = year.value;
var months = month.value;
initBirthDate(birthDate, years, months);
};
month.onchange = function(event) {
var years = year.value;
var months = month.value;
initBirthDate(birthDate, years, months);
};
//三级下拉列表框
var school=[
["北京大学","清华大学","中国人民大学","北京邮电大学","北京航空航天大学","北京理工大学","中国传媒大学"],
["天津大学","南开大学","天津医科大学","天津工业大学","天津理工大学","中国民航大学","天津师范大学"],
["复旦大学","同济大学","上海交通大学","华东师范大学","上海大学","上海中医药大学","上海财经大学"]
];
var major=[
[["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"]],
[["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["临床医学","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"]],
[["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"],["软件工程","网络工程","临床医学"]]
];
function sel_school() {
var selCity = document.form3sel.city;// 获得城市下拉选择框对象
var selschool = document.form3sel.school; // 获得学校下拉选择框对象
var selmajor = document.form3sel.major;// 获得专业下拉选择框对象
var arrcityschool = school[selCity.selectedIndex - 1];// 获得城市所对应的学校数组
selschool.length = 1;// 清空学校下拉列表框,仅保留第一个选项
selmajor.length = 1; // 清空专业下拉列表框,仅保留第一个选项
for (var i = 0; i < arrcityschool.length; i++) { // 将学校数组中的值填充到学校下拉列表框中
selschool[i + 1] = new Option(arrcityschool[i], arrcityschool[i]);
}
}
function sel_major() {
var selCity = document.form3sel.city;// 获得城市下拉选择框对象
var selschool = document.form3sel.school; //获得学校下拉选择框对象
var selmajor = document.form3sel.major; //获得专业下拉选择框对象
var arrcityschool = major[selCity.selectedIndex - 1][selCity.selectedIndex - 1]; //获得学校所对应的专业数组
selmajor.length = 1;//清空专业下拉列表框,仅保留第一个选项
for (var i = 0; i < arrcityschool.length; i++) {//将专业数组中的值填充到专业下拉列表框中
selmajor[i + 1] = new Option(arrcityschool[i], arrcityschool[i]);
}
}
</script>重点知识：正则表达式全解析+常用实例
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
