Question

警报号码或字符只在文本框中输入值？如何在AngularJS中使用？

我想添加一些功能，当有人在国家/地区名称文本框中输入数字时。该程序将提示“输入国家/地区名称而不是数字”。与邮政编码“输入邮政编码而非名称”

相反

这是我的代码......

 <!DOCTYPE html>   
 <html>  
      <head>  
           <title>Country Listings</title>  
           <link rel="stylesheet" href="css/bootstrap.min.css" />  
           <script src="js/angular.min.js"></script> 
      </head>  
      <body>  
           <div class="container" style="width:500px;">  
                <h1 align="center">Countries</h1>  
                <div ng-app="myapp" ng-controller="countrycontroller" ng-init="displayData()"> 
                     <label>Search: </label>
                     <input type="text" ng-model="searchBox" class="form-control">
                     <br />
                     <label>Country Name</label>  
                     <input type="text" name="country_name" ng-model="countryname" class="form-control" value="{{countryname}}" required="" />
                     <br />  
                     <label>Zip Code</label>  
                     <input type="text" name="zip_code" ng-model="zipcode" class="form-control" required="" />                     
                     <br />
                     <input type="hidden" ng-model="id" />  
                     <input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="{{btnName}}"/> 
                     <br /><br />  
                     <table class="table table-bordered">  
                          <tr>  
                               <th>ID</th>
                               <th>Country Name</th>  
                               <th>Zip Code</th>  
                               <th colspan="2">Actions</th>   
                          </tr>  
                          <tr ng-repeat="x in names | filter:searchBox"> 
                               <td class="tbl">{{x.id}}</td>
                               <td class="tbl">{{x.country_name}}</td>  
                               <td class="tbl">{{x.zip_code}}</td>  
                               <td class="tbl"><button ng-click="updateData(x.id, x.country_name, x.zip_code)" class="btn btn-info btn-xs">Edit</button></td>  
                               <td class="tbl"><button ng-click="deleteData(x.id )" class="btn btn-danger btn-xs">Delete</button></td>  
                          </tr>  
                     </table>  
                </div>  
           </div>  
           </div>
      </body>  
 </html>  
 <script>  
 var app = angular.module("myapp",[]);  
 app.controller("countrycontroller", function($scope, $http){  
      $scope.btnName = "Submit";  
      $scope.insertData = function(){  
           if($scope.countryname == null)  
           {  
                alert("Country Name is required");  
           }  
           else if($scope.zipcode == null)  
           {  
                alert("Zip Code is required");  
           }
           else  
           {  
                $http.post(  
                     "insert.php",  
                     {'countryname':$scope.countryname, 'zipcode':$scope.zipcode, 'btnName':$scope.btnName, 'id':$scope.id}  
                ).success(function(data){  
                     alert(data);  
                     $scope.countryname = null;  
                     $scope.zipcode = null;  
                     $scope.btnName = "Submit";  
                     $scope.displayData();  
                });  
           }  
      }  
      $scope.displayData = function(){  
           $http.get("select.php")  
           .success(function(data){  
                $scope.names = data;  
           });  
      }  
      $scope.updateData = function(id, first_name, last_name){  
           $scope.id = id;  
           $scope.countryname = first_name;  
           $scope.zipcode = last_name;  
           $scope.btnName = "Edit";  
      }  
      $scope.deleteData = function(id){  
           if(confirm("Are you sure you want to delete this data?"))  
           {  
                $http.post("delete.php", {'id':id})  
                .success(function(data){  
                     alert(data);  
                     $scope.displayData();  
                });  
           }  
           else  
           {  
                return false;  
           }  
      }  
 });  
 </script>

我已尝试添加其他if（$ scope.countryname = [0-9]），冒充它不起作用。请帮忙...我也尝试过编辑我的insert.php，但不缺。

的index.php

 <?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 $data = json_decode(file_get_contents("php://input"));  
 if(count($data) > 0)  
 {  
      $country_name = mysqli_real_escape_string($connect, $data->countryname);       
      $zip_code = mysqli_real_escape_string($connect, $data->zipcode);  
      $btn_name = $data->btnName; 
      if($btn_name == "Submit")  
      {  
           $query = "INSERT INTO tbl_user(country_name, zip_code) VALUES ('$country_name', '$zip_code')";  
           if(mysqli_query($connect, $query))  
           {  
                echo "Data Inserted...";  
           }  
           else  
           {  
                echo 'Error';  
           }  
      }  
      if($btn_name == 'Edit')  
      {  
           $id = $data->id;  
           $query = "UPDATE tbl_user SET country_name = '$country_name', zip_code = '$zip_code' WHERE id = '$id'";  
           if(mysqli_query($connect, $query))  
           {  
                echo 'Data Updated...';  
           }  
           else  
           {  
                echo 'Error';  
           }  
      }  
 }  
 ?>

Answer 1

使用ng-pattern

仅限数字：

ng-pattern="/^[0-9]*$/"

仅限字符：

ng-pattern="/^[a-zA-Z]*$/"

<强> Reference

警报号码或字符仅在文本框中输入值？如何在AngularJS中？

1 个答案: