国家/城市/州验证
Posted
技术标签:
【中文标题】国家/城市/州验证【英文标题】：Country/City/state validation 【发布时间】：2011-01-14 07:40:35 【问题描述】：我想用 php 和 jQuery 做以下事情
https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegNow
步骤
-
从下拉列表中选择一个国家/地区。
城市下拉列表将自动填充所选国家/地区的城市列表。
如果该国家/地区有可用的州，则州列表将与该国家/地区的所有州列表一起可见。
然后我需要验证所选的城市、州和国家/地区。
你有什么想法吗？
提前致谢
【问题讨论】：
到目前为止你做了什么？ 先下点功夫。如果你有任何问题，然后再回来 如果你这样做了，不要像你的示例链接那样重新加载页面......打字离开并让页面在你失去焦点和输入的下方重新加载真的很烦人（使用 AJAX而是） 【参考方案1】：不退出您的要求，但是这会自动填充用户数据并保存在浏览器中的字段。
使用 html 自动完成： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
<form method="post">
<input type="text" name="userCountry" id="country-name" autocomplete="on" />
<input type="submit" />
</form>
然后使用PHP验证信息；
<?PHP
/* SANITIZE END-USER INPUTs */
if ( $_SERVER["REQUEST_METHOD"] == "POST" )
$_POST = filter_var_array( $_POST, FILTER_SANITIZE_STRING );
/* VALIDATE DATA */
if ( isset( $_POST['userCountry'] )
$countrys = array( "united states of america", "united kingdom", "australia" );
if ( !in_array( strtolower( $_POST['userCountry'] ), $countrys ) )
/* Return a failed response */
return false;
/* SAVE DATA */
/* Return a successful response */
return true;
?>
或
您可能需要查看 onChange 然后填充数据。例如。
$("#country-name").change(function ()
$("#state, #city").find("option:gt(0)").remove();
$("#state").find("option:first").text("Loading...");
$.getJSON("/get/states",
country_id: $(this).val()
, function (json)
$("#state").find("option:first").text("");
for (var i = 0; i < json.length; i++)
$("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state"));
);
);
$("#state").change(function ()
$("#city").find("option:gt(0)").remove();
$("#city").find("option:first").text("Loading...");
$.getJSON("/get/cities",
state_id: $(this).val()
, function (json)
$("#city").find("option:first").text("");
for (var i = 0; i < json.length; i++)
$("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city"));
);
);
【讨论】：
【参考方案2】： var app = angular.module('ganesh', []);
app.controller('MainCtrl', function($scope)
$scope.name = "Charlie's Programming..........";
$scope.countries =
'USA':
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
,
'India':
'AndamanandNicobarIslands' : ,
'AndhraPradesh' : ,
'ArunachalPradesh' : ,
'Assam' : ,
'Bihar' : ,
'Chandigarh' : ,
'Chhattisgarh' : ,
'DadraandNagarHaveli' : ,
'DamanandDiu' : ,
'Delhi' : ,
'Goa' : ,
'Gujarat' : ,
'Haryana' : ,
'HimachalPradesh' : ,
'JammuandKashmir' : ,
'Jharkhand' : ,
'Karnataka' : ,
'Kerala' : ,
'Lakshadweep' : ,
'MadhyaPradesh' : ,
'Maharashtra' :
'Ahmednagar' : [ ],
'Akola|Alibag' : [ ],
'Amaravati' : [ ],
'Arnala' : [ ],
'Aurangabad' : [ ],
'Aurangabad' : [ ],
'Bandra' : [ ],
'Bassain' : [ ],
'Belapur' : [ ],
'Bhiwandi' : [ ],
'Bhusaval' : [ ],
'Borliai-Mandla' : [ ],
'Chandrapur' : [ ],
'Dahanu' : [ ],
'Daulatabad' : [ ],
'Dighi(Pune)' : [ ],
'Dombivali' : [ ],
'Goa' : [ ],
'Jaitapur' : [ ],
'Jalgaon' : [ ],
'JawaharlalNehru(NhavaSheva)' : [ ],
'Kalyan' : [ ],
'Karanja' : [ ],
'Kelwa' : [ ],
'Khopoli' : [ ],
'Kolhapur' : [ ],
'Lonavale' : [ ],
'Malegaon' : [ ],
'Malwan' : [ ],
'Manori' : [ ],
'MiraBhayandar' : [ ],
'Miraj' : [ ],
'Mumbai(exBombay)' : [ ],
'Murad' : [ ],
'Nagapur' : [ ],
'Nagpur' : [ ],
'Nalasopara' : [ ],
'Nanded' : [ ],
'Nandgaon' : [ ],
'Nashik' : ['422606', '422004', '422002', '422003'],
'NaviMumbai' : [ ],
'Nhave' : [ ],
'Osmanabad' : [ ],
'Palghar' : [ ],
'Panvel' : [ ],
'Pimpri' : [ ],
'Pune' : [ ],
'Ratnagiri' : [ ],
'Sholapur' : [ ],
'Shrirampur' : [ ],
'Shriwardhan' : [ ],
'Tarapur' : [ ],
'Thana' : [ ],
'Thane' : [ ],
'Trombay' : [ ],
'Varsova' : [ ],
'Vengurla' : [ ],
'Virar' : [ ],
'Wada' : [ ],
'Panvel' : [ ],
'Pimpri' : [ ],
'Pune' : [ ],
'Ratnagiri' : [ ],
'Sholapur' : [ ],
'Shrirampur' : [ ],
'Shriwardhan' : [ ],
'Tarapur' : [ ],
'Thana' : [ ],
'Thane' : [ ],
'Trombay' : [ ],
'Varsova' : [ ],
'Vengurla' : [ ],
'Virar' : [ ],
'Wada' : [ ],
,
'Manipur' : ,
'Meghalaya' : ,
'Mizoram' : ,
'Nagaland' : ,
'Orissa' : ,
'Pondicherry' : ,
'Punjab' : ,
'Rajasthan' : ,
'Sikkim' : ,
'TamilNadu' : ,
'Telangana' : ,
'Tripura' : ,
'Uttaranchal' : ,
'UttarPradesh' : ,
'WestBengal' :
,
'Australia':
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
;
$scope.GetSelectedCountry = function ()
$scope.strCountry = document.getElementById("country").value;
;
$scope.GetSelectedState = function ()
$scope.strState = document.getElementById("state").value;
;
$scope.GetSelectedcity = function ()
$scope.strCity = document.getElementById("city").value;
;
$scope.GetSelectedpin = function ()
$scope.strPin = document.getElementById("pin").value;
;
); <!DOCTYPE html>
<html ng-app="ganesh">
<head>
<meta charset="utf-8" />
<title>Charlie</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body >
<div ng-controller="MainCtrl">
<p>Welcome to name</p>
<label for="country">Country *</label>
<select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
ng-change="GetSelectedCountry()">
<option value=''>Select</option>
</select>
<label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
ng-change="GetSelectedState()"><option value=''>Select</option>
</select>
<label for="city">City *</label>
<select id="city" ng-disabled="!model.state" ng-model="model.city" ng-options="city for (city, pin) in model.state"
><option value=''>Select</option>
</select>
<label for="pin">Pincode *</label>
<select id="pin" ng-disabled="!model.city" ng-model="model.pin" ng-options="pin for pin in model.city"
><option value=''>Select</option>
</select>
</div>
</body>
</html>【讨论】：
这既不是 PHP 也不是 JQuery。请阅读***.com/help/how-to-answer。【参考方案3】：打印带有状态列表的下拉列表 通过方法使状态的列表 id 获取或发布 id， 制作一个 sql 城市列表表并使用 php 调用该表比 jquery 需要更多时间，但它可以工作
【讨论】：
【参考方案4】：从下拉列表中选择一个国家。
我假设这是一个从数据库表中填充的 HTML SELECT。
城市下拉列表将填满 自动与城市列表 所选国家/地区。
不要这样做。你想要的是一个 jQuery Autocomplete，用户开始输入，然后你从数据库中提取可能的条目。
如果状态是 可用于该国家然后说明 列表将在所有状态下可见 该国家/地区的列表。
如果您要进行邮寄地址验证，则仅在少数国家/地区需要此功能。一种常见的处理方法是隐藏SELECT 框，当用户选择一个国家（例如澳大利亚）时，您需要在其中显示省份。
那我需要 验证选定的城市、州和 国家。
请注意，State/Province 和 Country 是 SELECT 控件，因此它们永远不会产生无效结果，并且无法验证城市名称。
【讨论】：
【参考方案5】：我们所做的是使用 ServiceObjects.com 来验证地址。
所以我们让用户在纯文本字段（或多或少）中输入他们的地址，然后简单地将地址详细信息发送到 ServiceObjects.com 并使用他们的 web 服务返回的规范化/更正后的地址。
Service Objects Address Valiation这不是直接回答您的问题，但也许它为根本问题提供了另一种解决方案。
【讨论】：
【参考方案6】：这是一个非常标准的 AJAX 场景。事实上，您描述的确切问题可能是最常见的 Ajax 介绍性示例。您已将 PHP 和 jQuery 列为问题的标签；将这些结合使用将使解决方案变得非常简单。
我的建议是使用 PHP 查找 jQuery Ajax 示例。您几乎肯定会找到您正在寻找的东西。
【讨论】：
【参考方案7】：我也面临着类似的挑战。我不知道您是否是这种情况，但就我而言，我们需要确保输入的城市确实是现有城市。稍后在项目中，我们希望能够收集世界任何地方的同一城市的条目。这些结果需要精确。 所以我们不能让人们也进入费城和费城。我们还希望人们使用城市的英文名称而不是他们自己语言的名称。
我找到了一些国家、州和城市的公共数据库。例如这里：MaxMind。但这是一个大约 300 万个城市的列表，我发现另一个超过 600 万个城市。我已经按照您描述的方式进行了设置。选择国家，然后通过 AJAX 调用获取其中的城市并填写下拉列表。对于像荷兰这样的国家来说，这大约需要 2 秒，但对于中国或俄罗斯来说，加载是不可接受的。 而且列表很大，而且对用户来说根本不友好。
所以我认为最好让人们在文本字段中输入它们，因为城市真的全部匹配并不是那么重要。 我们现在正在研究 Google Maps API 来解决我们的问题。
【讨论】：
感谢 abel 的好建议。我非常接近解决方案。一旦我完成了，我会在这里发布。再次感谢。【参考方案8】：如果您想让外国人更容易输入地址，那么请简单地提供一个文本字段，地址可以作为格式化文本输入。很少有国家使用州（或类似的东西）作为地址的一部分，我不明白您为什么要提供带有城市的下拉列表。德国城市列表（或更正确、有效的邮政地址中的地名）将包含大约 23,000 个条目。你觉得哪个更容易，输入地址或尝试在这样的列表中找到地名_
【讨论】：
以上是关于国家/城市/州验证的主要内容，如果未能解决你的问题，请参考以下文章
是否有任何 API 用于获取所有国家并通过国家/地区获取所有州/地区并再次通过州/地区获取其中的所有城市
如何从reverseGeocodeCoordinate获取国家、州、城市？
从国家、州、城市和每个城市纬度/经度的数据库查询构建 JSON