1、表单注册与表单验证
要求：
a、浏览者输入用户名、性别、密码、确认密码、密码问题、问题答案、电子邮件、联系电话、职业等信息。填写信息不能为空且电子邮件格式正确。
b、添加table表格，实现基本布局
c、添加JavaScript代码，实现非空验证、电子邮件格式验证。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单注册与验证</title>
<script type="text/javascript">
function validate(that) {
//判断所有input不为空
var inputs=document.getElementsByTagName("input");
var flag=false;
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=="text"){
if(inputs[i].value==""){
flag=true;
break;
}
}
}
if(flag){
alert("请填写完整");
return false;
}
//判断密码和重复密码是否一致
if(document.vali.Userpass.value!=that.Userpass2.value){
alert("两次输入密码不一致");
return false;
}
//校验电子邮件格式
var email=that.email.value;
var reg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(email)){
alert("电子邮件格式错误");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="" name="vali" onsubmit="return validate(this);">
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" id="Username" name="Username"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="Userpass"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="Userpass2"></td>
</tr>
<tr>
<td>密码问题</td>
<td><input type="text" name="question"></td>
</tr>
<tr>
<td>问题答案</td>
<td><input type="text" name="answer"></td>
</tr>
<tr>
<td>电子邮件</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>联系电话</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>职业</td>
<td><input type="text" name="job"></td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
效果图
2、省市联动效果
要求：
a、三个下拉列表，设定省、市和区。
b、添加JavaScript代码，实现级联效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动效果</title>
<script type="text/javascript">
var data = [ {
"name" : "河南省",
"child" : [ {
"name" : "郑州市",
"child" : [ {
"name" : "中原区",
}, {
"name" : "金水区",
} ]
}, {
"name" : "濮阳市",
"child" : [ {
"name" : "华龙区",
}, {
"name" : "高新区",
} ]
}, ]
}, {
"name" : "浙江省",
"child" : [ {
"name" : "杭州市",
"child" : [ {
"name" : "滨江区",
}, {
"name" : "淳安区",
} ]
}, {
"name" : "绍兴市",
"child" : [ {
"name" : "柯桥区",
}, {
"name" : "上虞区",
} ]
}, ]
} ]
//初始时加载省列表
window.onload = function() {
var pro = document.getElementById("province");
for (var i = 0; i < data.length; i++) {
var option = new Option(data[i]["name"], data[i]["name"]);
pro.add(option);
}
}
//切换城市后触发加载市列表
function loadCity() {
var proName = document.getElementById("province").value;
var city = document.getElementById("city");
var area = document.getElementById("area");
city.options.length = 1;
area.options.length = 1;
for (var i = 0; i < data.length; i++) {
if (data[i]["name"] == proName) {
for (var j = 0; j < data[i]["child"].length; j++) {
var option = new Option(data[i]["child"][j]["name"],
data[i]["child"][j]["name"]);
city.add(option);
}
}
}
}
//切换地区后触发加载地区列表
function loadArea() {
var cityName = document.getElementById("city").value;
var area = document.getElementById("area");
area.options.length = 1;
for(var i=0;i<data.length;i++){
for(var j=0;j<data[i]["child"].length;j++){
if(data[i]["child"][j]["name"] == cityName){
for(var k=0;k<data[i]["child"][j]["child"].length;k++){
var option = new Option(data[i]["child"][j]["child"][k]["name"],data[i]["child"][j]["child"][k]["name"]);
area.add(option);
}
}
}
}
}
</script>
</head>
<body>
<select id="province" onchange="loadCity()">
<option>-请选择-</option>
</select>
<select id="city" onchange="loadArea()">
<option>-请选择-</option>
</select>
<select id="area">
<option>-请选择-</option>
</select>
</body>
</html>
ps：
如果仅仅为省和市两级联动，下面也提供代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动效果</title>
<script type="text/javascript">
var array = new Array();
array['浙江'] = [ "杭州", "绍兴", "温州" ];
array['河南'] = [ "郑州", "濮阳", "南阳" ];
window.onload = function() {
var provinceObj = document.getElementById("province");
for(var i in array) {
var option = new Option(i, i);
provinceObj.add(option);
}
}
function changeCity() {
var provinceName = document.getElementById("province").value;
var city = document.getElementById("city");
//清理内容，只保留“-请选择-”
city.options.length = 1;
for (var p in array) {
if (p == provinceName) {
for (var c in array[p]) {
var option = new Option(array[p][c], array[p][c]);
city.add(option);
}
}
}
}
</script>
</head>
<body>
<select id="province" onchange="changeCity()">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
</html>
原创文章，作者：witersen，如若转载，请注明出处：https://www.witersen.com
微信扫一扫