正确效果:
错误效果:
主体部分:
<form action="onsubmitaddress.html">
账号:<input type="text" onkeyup="acc(this.value)"/>
<span id="sp1"></span>
<br>
手机号: <input type="text" onblur="sjh(this.value)" />
<span id="sp2"></span>
<br>
邮箱:<input type="text" onblur="email(this.value)" />
<span id="sp3"></span>
<br>
请选择你的城市:
<select id="province" onchange="proandcity()">
<option value="">请选择你的省份</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
省
<select id="city" onchange="prsc()">
<option value="">请选则你的城市</option>
</select>
市
<br />
家庭住址:<input type="text" id="scr" readonly/>
<br />
<input type="submit" value="提交"/>
</form>
账号部分:
要求全为数字,当输入非数字的时候弹出提示
//封装
function $(obj){
return document.getElementById(obj);
}
//账号,仅能由数字组成
function acc(op){
var str=op;
var regex=/^[0-9]*$/;//数字
if(regex.test(str)){
$("sp1").innerText="";
}else{
$("sp1").innerText="账户名仅有数字组成";
}
if(op==""){
$("sp1").innerText="";
}
}
手机号码:
要求11位,1开头,2、3位为【3、4、5、6、7、8、9】中的任意,后八位为0-9的任意
//手机号
function sjh(op){
var str=op;
var regex=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;//11位,1是第一位,2、3根据运营商,后八位任意
if(regex.test(str)){
$("sp2").innerText="";
}else{
$("sp2").innerText="手机号码格式不正确";
}
if(op==""){
$("sp2").innerText="";
}
}
邮箱:
//邮箱
function email(op){
var str=op;
var regex=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
if(regex.test(str)){
$("sp3").innerText="";
}else{
$("sp3").innerText="邮箱格式不正确";
}
if(op==""){
$("sp3").innerText="";
}
}
省市级联:
当改变省的时候会改变为对应的市
//省市级联
function proandcity(){
var arr=new Array(2);
arr["河南"]=["郑州","开封","新乡"];
arr["河北"]=["保定","石家庄","邯郸"];
var province=$("province").value;
$("city").options.length=0;
for(var index in arr[province]){
var ooo = document.createElement("option");
ooo.value=arr[province][index];
ooo.text=arr[province][index];
$("city").appendChild(ooo);
}
$("scr").value=$("province").value+"省"+$("city").value+"市";
}
打印到家庭住址部分:
function prsc(){
$("scr").value=$("province").value+"省"+$("city").value+"市";
}
javascript是一门不严谨的语言,数组的下标可以是汉字