day03主要学习了JS的进阶，主要内容是DOM，今天的作业是注册表单的提交和校验，
其中要用到省市联动的效果，一遍分析一遍回顾今天的内容。
首先是标题标签，<h1>注册账号</h1> 由于h1显示过大，调整为h2，我们要做的是表单提交，
先写上<form>标签，注意提交方式要选get方式，如果选post方式，无法得到提交的结果
要让我们的内容更加规范，选择将内容写入表格中。
一，昵称：
写在一个<td>标签里，第二个单元格<td>需要添加文本输入框<input type="text" id="zero">
给出id值，后面需要对标签里的内容进行判断，根据题目要求，需要在获得焦点的时候在后面显示"请输入昵称"
在失去焦点的时候需要判断是否为空显示"昵称不能为空"，οnfοcus="方法名" οnblur="方法名" 后面需要预留一个空的单元格
给出新的id="one" 作用是在判断文本框是否有内容后显示出新的内容
二，密码：
类似于昵称的写法，第一个单元格写"密码" 第二个单元格写密码输入框<input type="password" id="two"> 里面同样需要
οnfοcus="方法名" 和onblur 来触发得到焦点和失去焦点的事件。后面同样预留一个空的单元格用来显示密码框状态，id="three"。
三，确认密码：
方法和密码框一样。
四，性别：
同样将"性别"写在单元格中，后面的单元格写单选框<input type="radio" name="sex" value="nan"/>男 默认选中男的话需要在
前面一个input标签内加上checked='checked' 注意单引号和双引号的混合使用
五，生日：
生日需要用到下拉选择框，<select name="year">
<option></option> //name写在select标签内， value写在option标签内
</select>
六，所在地：
所在地是重中之重，要想使省市有联动效果（所谓联动效果就是在选择省份的时候，对应的市会显示出来）
根据老师给的js代码，里面有json数据有两种格式
var provinceJsons=
{"province":
[
{"name":"山东","value":"370000"},
{"name":"湖北","value":"420000"},
{"name":"湖南","value":"430000"},
{"name":"重庆","value":"500100"}
]
};
var cityJsons =
[
{"name":"济南","value":"370100","parentvalue":"370000"},
{"name":"潍坊","value":"370700","parentvalue":"370000"},
{"name":"青岛","value":"370200","parentvalue":"370000"},
{"name":"武汉","value":"420100","parentvalue":"420000"},
{"name":"黄冈","value":"421100","parentvalue":"420000"},
{"name":"襄阳","value":"420600","parentvalue":"420000"},
{"name":"长沙","value":"430100","parentvalue":"430000"},
{"name":"株洲","value":"430200","parentvalue":"430000"},
{"name":"衡阳","value":"430400","parentvalue":"430000"},
{"name":"沙坪坝区","value":"500106","parentvalue":"500100"},
{"name":"江北区","value":"500105","parentvalue":"500100"},
{"name":"渝北区","value":"500112","parentvalue":"500100"}
];
provinceJsons对象.province得到一个数组，里面存储的就是name value 等数据
通过对数组数据cityJsons的遍历也可以得到市的数据。
页面加载后将省份加载，在<body>标签里面写入onload时间，绑定一个loadpros()方法
function loadpros(){
var str1="<option value='-1' selected='selected'>省/直辖市</option>"; //声明一个字符串，将默认选中
}
页面加载完成后，省份的信息也加载完成了。
当省份被选中时，需要出发onchange事件，因为下拉选择框选中省份后其内容发生了改变，我们在省份的下拉选择框<select>标签
内添加οnchange="change()"。
function change(){
//通过cityJsons[0] cityJsons[1]...拿到每一个省的市数组 首先拿到当前选中的省份的值
var num=prov.value;
var str2="";
for(var i=0;i<cityJsons.length;i++){
if(cityJsons[i].parentvalue==num){
str2+="<option value='"+cityJsons[i].value+"'>"+cityJsons[i].name+"</option>";
}
}
cit.innerHTML=str2;
}
var prov=document.getElementById("province"); //省份下拉选择框标签
var cit=document.getElementById("city"); //市的下拉选择框标签
var pros=provinceJsons.province;
触发onchange事件后，change方法被调用，根据要求，我们需要将对应的市加载到页面，
通过下拉选择省份，我们可以由省份的下拉选择框标签获取当前选中的省份的值，即prov.value 省份的邮编
然后通过遍历Jsons数组拿到所有的市的元素，比对prvo.value和parentvalue的值，可以判断出哪些市属于哪个省份，
由此if语句判断后，prov.value=Json[i].parentvalue时就将对应的name写到option标签内，value写到option标签上。
这样在筛选后就将对应的市的信息加载到了页面中，完成了省市的联动。
七，手机号码：
同样的<tr><td>标签后 中间添加一个文本输入框，题目要求我们用到点击图片提交和回车提交，我们在输入完手机号就会点回车键提交，
因此需要在手机号码的<input>标签上写一个键盘按下事件οnkeypress="key(event)" .
function key(obj){
if(obj.keyCode==13){
//document.getElementById("form1").submit(); //得到表单标签对象并提交
checkForm();
}
}
key()方法需要有参数，当键值==13时我们调用表单的校验方法（校验方法必须选择第二种方式）第一种在<form>标签上写οnsubmit="return checkForm()"
的方式适合于提交按钮<input type="submit" >
八，表单提交：
通过图片提交，注意这里使用的是<a> 不能直接使用<img> 要用<a>标签包裹<img> οnclick="checkform()" 点击图片来触发表单校验方法，表单校验
function checkForm(){
//分别获取昵称 密码 确认密码 手机号码的当前值
var name=document.getElementById("zero").value;
var pd=document.getElementById("two").value;
//var pd1=document.getElementById("four").value;
var phonenum=document.getElementById("six").value;
if(name=="") {
document.getElementById("one").innerHTML="昵称不能为空";
}else if(pd==""){
document.getElementById("three").innerHTML="密码不能为空";
}else if(pd!=123456){
document.getElementById("three").innerHTML="密码错误";
}else if(phonenum=="") {
document.getElementById("seven").innerHTML="手机号不能为空";
}else {
toSubmit();
}
}
根据题目要求，我们需要对昵称，密码，手机号进行校验，校验通过后才能调用提交方法。
function toSubmit(){
document.getElementById("form1").submit(); //得到表单标签对象并提交
}
其中要用到省市联动的效果，一遍分析一遍回顾今天的内容。
首先是标题标签，<h1>注册账号</h1> 由于h1显示过大，调整为h2，我们要做的是表单提交，
先写上<form>标签，注意提交方式要选get方式，如果选post方式，无法得到提交的结果
要让我们的内容更加规范，选择将内容写入表格中。
一，昵称：
写在一个<td>标签里，第二个单元格<td>需要添加文本输入框<input type="text" id="zero">
给出id值，后面需要对标签里的内容进行判断，根据题目要求，需要在获得焦点的时候在后面显示"请输入昵称"
在失去焦点的时候需要判断是否为空显示"昵称不能为空"，οnfοcus="方法名" οnblur="方法名" 后面需要预留一个空的单元格
给出新的id="one" 作用是在判断文本框是否有内容后显示出新的内容
二，密码：
类似于昵称的写法，第一个单元格写"密码" 第二个单元格写密码输入框<input type="password" id="two"> 里面同样需要
οnfοcus="方法名" 和onblur 来触发得到焦点和失去焦点的事件。后面同样预留一个空的单元格用来显示密码框状态，id="three"。
三，确认密码：
方法和密码框一样。
四，性别：
同样将"性别"写在单元格中，后面的单元格写单选框<input type="radio" name="sex" value="nan"/>男 默认选中男的话需要在
前面一个input标签内加上checked='checked' 注意单引号和双引号的混合使用
五，生日：
生日需要用到下拉选择框，<select name="year">
<option></option> //name写在select标签内， value写在option标签内
</select>
六，所在地：
所在地是重中之重，要想使省市有联动效果（所谓联动效果就是在选择省份的时候，对应的市会显示出来）
根据老师给的js代码，里面有json数据有两种格式
var provinceJsons=
{"province":
[
{"name":"山东","value":"370000"},
{"name":"湖北","value":"420000"},
{"name":"湖南","value":"430000"},
{"name":"重庆","value":"500100"}
]
};
var cityJsons =
[
{"name":"济南","value":"370100","parentvalue":"370000"},
{"name":"潍坊","value":"370700","parentvalue":"370000"},
{"name":"青岛","value":"370200","parentvalue":"370000"},
{"name":"武汉","value":"420100","parentvalue":"420000"},
{"name":"黄冈","value":"421100","parentvalue":"420000"},
{"name":"襄阳","value":"420600","parentvalue":"420000"},
{"name":"长沙","value":"430100","parentvalue":"430000"},
{"name":"株洲","value":"430200","parentvalue":"430000"},
{"name":"衡阳","value":"430400","parentvalue":"430000"},
{"name":"沙坪坝区","value":"500106","parentvalue":"500100"},
{"name":"江北区","value":"500105","parentvalue":"500100"},
{"name":"渝北区","value":"500112","parentvalue":"500100"}
];
provinceJsons对象.province得到一个数组，里面存储的就是name value 等数据
通过对数组数据cityJsons的遍历也可以得到市的数据。
页面加载后将省份加载，在<body>标签里面写入onload时间，绑定一个loadpros()方法
function loadpros(){
var str1="<option value='-1' selected='selected'>省/直辖市</option>"; //声明一个字符串，将默认选中
}
页面加载完成后，省份的信息也加载完成了。
当省份被选中时，需要出发onchange事件，因为下拉选择框选中省份后其内容发生了改变，我们在省份的下拉选择框<select>标签
内添加οnchange="change()"。
function change(){
//通过cityJsons[0] cityJsons[1]...拿到每一个省的市数组 首先拿到当前选中的省份的值
var num=prov.value;
var str2="";
for(var i=0;i<cityJsons.length;i++){
if(cityJsons[i].parentvalue==num){
str2+="<option value='"+cityJsons[i].value+"'>"+cityJsons[i].name+"</option>";
}
}
cit.innerHTML=str2;
}
var prov=document.getElementById("province"); //省份下拉选择框标签
var cit=document.getElementById("city"); //市的下拉选择框标签
var pros=provinceJsons.province;
触发onchange事件后，change方法被调用，根据要求，我们需要将对应的市加载到页面，
通过下拉选择省份，我们可以由省份的下拉选择框标签获取当前选中的省份的值，即prov.value 省份的邮编
然后通过遍历Jsons数组拿到所有的市的元素，比对prvo.value和parentvalue的值，可以判断出哪些市属于哪个省份，
由此if语句判断后，prov.value=Json[i].parentvalue时就将对应的name写到option标签内，value写到option标签上。
这样在筛选后就将对应的市的信息加载到了页面中，完成了省市的联动。
七，手机号码：
同样的<tr><td>标签后 中间添加一个文本输入框，题目要求我们用到点击图片提交和回车提交，我们在输入完手机号就会点回车键提交，
因此需要在手机号码的<input>标签上写一个键盘按下事件οnkeypress="key(event)" .
function key(obj){
if(obj.keyCode==13){
//document.getElementById("form1").submit(); //得到表单标签对象并提交
checkForm();
}
}
key()方法需要有参数，当键值==13时我们调用表单的校验方法（校验方法必须选择第二种方式）第一种在<form>标签上写οnsubmit="return checkForm()"
的方式适合于提交按钮<input type="submit" >
八，表单提交：
通过图片提交，注意这里使用的是<a> 不能直接使用<img> 要用<a>标签包裹<img> οnclick="checkform()" 点击图片来触发表单校验方法，表单校验
function checkForm(){
//分别获取昵称 密码 确认密码 手机号码的当前值
var name=document.getElementById("zero").value;
var pd=document.getElementById("two").value;
//var pd1=document.getElementById("four").value;
var phonenum=document.getElementById("six").value;
if(name=="") {
document.getElementById("one").innerHTML="昵称不能为空";
}else if(pd==""){
document.getElementById("three").innerHTML="密码不能为空";
}else if(pd!=123456){
document.getElementById("three").innerHTML="密码错误";
}else if(phonenum=="") {
document.getElementById("seven").innerHTML="手机号不能为空";
}else {
toSubmit();
}
}
根据题目要求，我们需要对昵称，密码，手机号进行校验，校验通过后才能调用提交方法。
function toSubmit(){
document.getElementById("form1").submit(); //得到表单标签对象并提交
}
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
