本文介绍了一个简单的JavaScript表单验证代码示例，包括姓名、手机号和带有完整省市数据的级联选择框验证。此外，还提供了一种通过JavaScript动态填充下拉列表的方法。
一个简单js表单检测代码（数据完整的省市二级级联）
注意备忘：不要复制以前的省市级联代码，那里的省市数据不全。
<script>
function check_form(){
var name=document.getElementById("lbname").value;
var phone=document.getElementById("lbphone").value;
var city=document.getElementById("citys").value;
var badChar ="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
badChar += "abcdefghijklmnopqrstuvwxyz";
badChar += "0123456789";
badChar += " "+" "; //半角与全角空格
badChar += "`~!@#$%^&()-_=+]\\\\|:;\"\\\'<,>?/"; //不包含*或.的英文符号
if(""==name || name.length<2){
document.getElementById("realm").innerHTML ="请填写汉字";
return false;
}
if(name.indexOf(".") >= 0 || name.indexOf("。") >= 0){
document.getElementById("realm").innerHTML ="请填写汉字";
return false;
}
for(var i=0;i<name.length;i++){ //字符串name中的字符
var c = name.charAt(i);
if(badChar.indexOf(c) > -1){
document.getElementById("realm").innerHTML ="请填写汉字";
return false
}
else{
document.getElementById("realm").innerHTML ="";
}
}
if(phone.length!=11){
document.getElementById("phonenumber").innerHTML ="手机号码格式有误";
return false;
}
else if(phone.substring(0,2)!="13" && phone.substring(0,2)!="14" && phone.substring(0,2)!="15" && phone.substring(0,2)!="18"){
document.getElementById("phonenumber").innerHTML ="手机号码格式有误";
return false;
}
else if(isNaN(phone)){
document.getElementById("phonenumber").innerHTML ="手机号码格式有误";
return false;
}
else{
document.getElementById("phonenumber").innerHTML ="";
}
if(city.length <1){
document.getElementById("place").innerHTML ="请选择所在城市";
return false;
}
else{
return true;
}
}
</script>
<div class="c04">
<div class="c04_wz">
<form action="join.php" method="post" name="join">
<table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;margin:auto;width:900px;">
<tr><td colspan="2" height="15"></td></tr>
<tr style="height:30px;line-height:30px;">
<td align="right" width="350">姓 名：</td>
<td style="padding-left:10px;" width="540">
<input type="text" name="name" id="lbname" style="width:160px;" />
<span id="realm" style="color:#f00;font-size:12px;"></span>
</td>
</tr>
<tr style="height:30px;line-height:30px;">
<td align="right">手机号码：</td>
<td style="padding-left:10px;">
<input type="text" name="phone" id="lbphone" style="width:160px;" onChange="zzjsMobile(document.join.phone.value)" />
<span id="phonenumber" style="color:#f00;font-size:12px;"></span>
</td>
</tr>
<tr style="height:30px;line-height:30px;">
<td align="right">所在城市：</td>
<td style="padding-left:10px;">
<select class="bk" name="province" onChange="set_city(this, this.form.city);">
<option value="">选择省</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="天津市">天津市</option>
<option value="重庆市">重庆市</option>
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="江苏省">江苏省</option>
<option value="浙江省">浙江省</option>
<option value="安徽省">安徽省</option>
<option value="福建省">福建省</option>
<option value="江西省">江西省</option>
<option value="山东省">山东省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="广东省">广东省</option>
<option value="海南省">海南省</option>
<option value="四川省">四川省</option>
<option value="贵州省">贵州省</option>
<option value="云南省">云南省</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="青海省">青海省</option>
<option value="内蒙古">内蒙古</option>
<option value="广西">广西</option>
<option value="西藏">西藏</option>
<option value="宁夏">宁夏</option>
<option value="新疆">新疆</option>
<option value="中国台湾">中国台湾</option>
<option value="中国香港">中国香港</option>
<option value="中国澳门">中国澳门</option>
</select>
<select class="bk" name="city" id="citys" >
<option value="">选择城市</option>
</select>
<span id="place" style="color:#f00;font-size:12px;"></span>
<script>
function set_city(province, city){
var pv, cv;
var i, ii;
pv=province.value;
cv=city.value;
city.length=1;
if(pv=='0') return;
if(typeof(cities[pv])=='undefined') return;
for(i=0; i<cities[pv].length; i++){
ii = i+1;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
}
}
cities = new Object();
cities['北京市']=new Array('北京市');
cities['上海市']=new Array('上海市');
cities['天津市']=new Array('天津市');
cities['重庆市']=new Array('重庆市');
cities['中国台湾']=new Array('中国台湾');
cities['中国香港']=new Array('中国香港');
cities['中国澳门']=new Array('中国澳门');
cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市','阳泉市','临汾市','晋中市','运城市','忻州市','朔州市','吕梁市');
cities['辽宁省']=new Array('沈阳市', '朝阳市', '阜新市', '铁岭市', '抚顺市', '本溪市', '辽阳市', '鞍山市', '丹东市', '大连市', '营口市', '盘锦市', '锦州市', '葫芦岛市');
cities['吉林省']=new Array('长春市', '白城市', '松原市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '延边朝鲜族自治州');
cities['黑龙江省']=new Array('哈尔滨市', '齐齐哈尔市', '牡丹江市','佳木斯市', '大庆市', '鸡西市', '双鸭山市', '伊春市', '七台河市', '鹤岗市', '黑河市','绥化市', '大兴安岭地区');
cities['江苏省']=new Array('南京市', '徐州市', '连云港', '宿迁市', '淮阴市', '盐城市', '扬州市', '泰州市', '南通市', '镇江市', '常州市', '无锡市', '苏州市');
cities['浙江省']=new Array('杭州市', '湖州市', '嘉兴市', '舟山市', '宁波市', '绍兴市', '金华市', '台州市', '温州市','衢州市', '丽水市');
cities['安徽省']=new Array('合肥市', '宿州市', '淮北市', '阜阳市', '蚌埠市', '淮南市', '滁州市', '马鞍山市', '芜湖市', '铜陵市', '安庆市', '黄山市', '六安市', '巢湖市','宣城市','池州市','亳州市');
cities['福建省']=new Array('福州市', '南平市', '三明市', '莆田市', '泉州市', '厦门市', '漳州市', '龙岩市', '宁德市');
cities['江西省']=new Array('南昌市', '九江市', '景德镇市', '鹰潭市', '新余市', '萍乡市', '赣州市','吉安市','宜春市','抚州市','上饶市');
cities['山东省']=new Array('济南市', '聊城市', '德州市', '东营市', '淄博市', '潍坊市', '烟台市', '威海市', '青岛市', '日照市', '临沂市', '枣庄市', '济宁市', '泰安市', '莱芜市','滨州市','菏泽市');
cities['河南省']=new Array('郑州市', '三门峡市', '洛阳市', '焦作市', '新乡市', '鹤壁市', '安阳市', '濮阳市', '开封市', '商丘市', '许昌市', '漯河市', '平顶山市', '南阳市', '信阳市','周口市','驻马店市');
cities['湖北省']=new Array('武汉市', '十堰市', '荆门市', '孝感市', '黄冈市', '鄂州市', '黄石市', '咸宁市', '荆州市', '宜昌市', '襄樊市','襄阳市','随州市','恩施土家族苗族自治州');
cities['湖南省']=new Array('长沙市', '张家界市', '常德市', '益阳市', '岳阳市', '株洲市', '湘潭市', '衡阳市', '郴州市', '永州市', '邵阳市', '怀化市', '娄底市', '湘西自治州');
cities['广东省']=new Array('潮州市', '东莞市', '佛山市', '广州市', '河源市', '惠州市', '江门市', '揭阳市', '茂名市', '梅州市', '清远市', '汕头市', '汕尾市', '韶关市', '深圳市', '阳江市', '云浮市', '湛江市', '肇庆市', '中山市', '珠海市');
cities['海南省']=new Array('海口市', '三亚市');
cities['四川省']=new Array('阿坝藏族羌族自治州', '巴中市', '成都市', '达州市', '德阳市', '甘孜藏族自治州', '广安市', '广元市', '乐山市', '凉山彝族自治州', '泸州市', '眉山市', '绵阳市', '内江市', '南充市', '攀枝花市','遂宁市','雅安市','宜宾市','资阳市','自贡市');
cities['贵州省']=new Array('安顺市', '毕节地区', '贵阳市','六盘水市','黔东南苗族侗族自治州','黔南布依族苗族自治州','黔西南布依族苗族自治州','铜仁地区','遵义市');
cities['云南省']=new Array('保山市', '楚雄彝族自治州', '大理白族自治州','德宏傣族景颇族自治州','迪庆藏族自治州','红河哈尼族彝族自治州','昆明市','丽江市','临沧市','怒江傈僳族自治州','曲靖市','思茅市','文山壮族苗族自治州','西双版纳傣族自治州','玉溪市','昭通市');
cities['陕西省']=new Array('西安市', '延安市', '铜川市', '渭南市', '咸阳市', '宝鸡市', '汉中市', '榆林市','安康市','商洛市');
cities['甘肃省']=new Array('白银市', '定西市', '甘南藏族自治州', '嘉峪关市', '金昌市','酒泉市','兰州市','临夏回族自治州','陇南市','平凉市','庆阳市','天水市','武威市','张掖市');
cities['青海省']=new Array('西宁市','果洛藏族自治州','海北藏族自治州','海东地区','海南藏族自治州','海西蒙古族藏族自治州','黄南藏族自治州','玉树藏族自治州');
cities['内蒙古']=new Array('阿拉善盟',' 巴彦淖尔市', '包头市', '赤峰市', '鄂尔多斯市','呼和浩特市','呼伦贝尔市','通辽市','乌海市','乌兰察布市','锡林郭勒盟','兴安盟');
cities['广西']=new Array('百色市', '北海市', '崇左市', '防城港市', '贵港市', '桂林市', '河池市', '贺州市', '来宾市','柳州市','南宁市','钦州市','梧州市','玉林市');
cities['西藏']=new Array('拉萨市','阿里地区','昌都地区','林芝地区','那曲地区','日喀则地区','山南地区');
cities['宁夏']=new Array('银川市', '石嘴山市', '吴忠市','固原市','中卫市');
cities['新疆']=new Array('乌鲁木齐市', '克拉玛依市','阿克苏地区','阿勒泰地区','巴音郭楞蒙古自治州','博尔塔拉蒙古自治州','昌吉回族自治州','哈密地区','和田地区','喀什地区','克孜勒苏柯尔克孜自治州','省直辖行政单位','塔城地区','吐鲁番地区','伊犁哈萨克自治州');
</script>
</td>
</tr>
<tr><td colspan="2" height="10"></td></tr>
<tr style="height:35px;line-height:35px;">
<td align="right"><input type="p_w_picpath" src="p_w_picpaths/sub.jpg" check_form();" /></td>
<td style="padding-left:20px;"><a href="" target="_blank"><img src="p_w_picpaths/down.jpg" border="0" /></a></td>
</tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
</form>注：省市这里最好用ajax实现，这样也可以避免省市有数据不全的情况。
转载于:https://blog.51cto.com/xuqin/1196464
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
