一个简单js表单检测代码(数据完整的省市二级级联)

注意备忘:不要复制以前的省市级联代码,那里的省市数据不全。

一个简单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">姓&nbsp;&nbsp;名:</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实现,这样也可以避免省市有数据不全的情况。