国家/城市/州验证

Question

国家/城市/州验证

phpjqueryvalidationgeocode

3

我希望使用PHP和jQuery实现以下功能

https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegNow

步骤

从下拉列表中选择一个国家。
城市下拉列表将自动填充所选国家的城市列表。
如果该国家有州，则会显示州列表及该国家的所有州列表。

然后我需要验证所选城市、州和国家。

你有什么想法吗？

提前致谢。

- M.M.H.Masud

1

你目前做了什么？ - Quentin

先下点功夫吧，如果你有任何问题再回来。 - TFD

1

如果你要这样做，请不要像你的示例链接那样重新加载页面...这真的很烦人，当你正在输入时，页面会在你下面重新加载，失去你的焦点和输入（使用AJAX代替）。 - scunliffe

8个回答

1

我们所做的是使用ServiceObjects.com来验证地址。

因此，我们允许用户在纯文本字段中输入他们的地址（或多或少），然后简单地将地址详细信息发送到ServiceObjects.com，并使用其Web服务返回的规范化/更正的地址。

Service Objects Address Valiation

这并没有直接回答你的问题，但也许它提供了一个解决根本问题的替代方案。

- Alex Czarto

0

不完全是你所问的，但这个功能会自动填充用户在浏览器中保存的数据到字段中。

使用HTML自动完成： https://developer.mozilla.org/zh-CN/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"));
        }
    });
});

- Unknown_uID

0

我面临着类似的挑战。不知道你是否也是这样，但在我的情况下，我们需要确保输入的城市确实存在。在项目后期，我们希望能够收集来自世界各地同一城市的条目。而这些结果需要精确。

因此，我们不能让人们同时输入Philadelphia和Philly。我们还希望人们使用城市的英文名称，而不是他们自己语言中的名称。

我找到了一些公共数据库，包括国家、州和城市。例如，在这里：MaxMind。但这是一个大约有300万个城市的列表，我还找到了另一个超过600万个城市的列表。我按照你描述的方式设置了它。选择国家，然后通过AJAX调用获取其中的城市并填充下拉列表。对于荷兰这样的国家，大约需要2秒钟，但对于中国或俄罗斯来说，加载时间就不可接受了。而且这些列表非常庞大，也不太用户友好。

因此，我认为最好让人们在文本字段中输入城市名称，除非城市的匹配真的很重要。

我们现在正在考虑使用Google Maps API来解决我们的问题。

- onomio

谢谢Abel的好建议。我已经接近解决方案了。一旦完成，我会在这里发布。再次感谢。 - M.M.H.Masud

0

这是一个非常标准的AJAX场景。实际上，您描述的确切问题可能是最常见的入门Ajax示例。您在问题中列出了PHP和jQuery作为标签；同时使用它们将使解决方案变得非常简单。

我的建议是查找使用PHP的jQuery Ajax示例。您几乎肯定会找到您要寻找的内容。

- Brian Lacy

0

从下拉列表中选择一个国家。

我假设这是从数据库表填充的HTML SELECT。

不要这样做。你需要一个jQuery Autocomplete，用户开始输入后，你从数据库中提取可能的条目。

如果该国家有州/省，则状态下拉列表将自动填充该国家的所有城市列表。

如果你正在进行邮寄地址验证，你只需要对少数国家进行验证。处理它的一种常见方法是使用隐藏的SELECT框，当用户选择需要显示省份的国家（比如澳大利亚）时，就可以显示出来。

然后我需要验证所选的城市、州和国家。

请注意，州/省和国家是SELECT控件，因此它们永远不应该有无效的结果，并且验证城市名称是不可能的。

- egrunin

-1

打印一个带有州列表的下拉菜单通过方法将州列表ID设置为GET或POST ID，创建一个SQL城市列表表，并使用PHP调用该表，虽然它需要更长的时间，但它可以工作

- harshit pathak

-1

  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>

- Charlie

这不是PHP也不是JQuery。请阅读https://stackoverflow.com/help/how-to-answer。 - Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jarnbjo · Accepted Answer

如果你希望让外国人更容易输入地址，那么请提供一个文本字段，让地址可以作为格式化的文本输入。很少有国家将州（或类似内容）作为地址的一部分，我不明白为什么您要提供一个下拉列表来选择城市。一个包含德国城市（或更正确地说是邮政地址中有效的地名）的列表将包含大约23,000个条目。你认为哪个更容易，输入地址还是在这样的列表中寻找地名呢？