嗨,我对angularjs全新,我一直在探索表单验证。我已设法完成验证部分,但现在我遇到连接数据库的麻烦。 我点击了提交按钮但没有任何反应。我感谢任何形式的帮助,谢谢你。
<!DOCTYPE html>
<html>
<head>
<title>Add User Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="icon" href="spf-favicon.png" type="image" sizes="16x16">
<link href="testing.css" rel="stylesheet">
<div id="main">
<body style="background-color:white">
<header class="mainHeader">
<a href="home.php"><img src="policelogo.png"></a>
<form align="right">
<label class="logout">
<table id="govlogo">
<tbody>
<tr="logo">
<td>
<a target="_blank" href="http://www.gov.sg">
<img alt="Singapore Government" src="gov_logo.png"></img>
</a>
</td>
</tr>
<tr>
<td style="float:right">
<a target="_top" href="register.php">Register?</a>
|
<a target="_top" href="logout.php">Sign Out</a>
</td>
</tr>
</tbody>
</table>
</label>
</form>
</header>
</body>
</head>
<body ng-app="myApp">
<div ng-controller="validateCtrl">
<h2 align="center">Add User Form</h2>
<form align="center" name="add_user" novalidate>
<ul>
<li class="err" ng-repeat="errorr in errors"> {{ errorr}} </li>
</ul>
<ul>
<li class="info" ng-repeat="msg in msgs"> {{ msg}} </li>
</ul>
<p><b>Name:</b>
<input type="text" placeholder="Enter your name" name="name" ng-model="name" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.name.$dirty && add_user.name.$invalid">
<br>
<span ng-show="add_user.name.$error.required">Name is required.</span>
</span>
</p>
<p><b>PDP :</b>
<input type="text" placeholder="0----" name="PDP" ng-model="PDP" ng-minlength="5" ng-maxlength="5" ng-pattern="/^[0-9]+$/" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.PDP.$dirty && add_user.PDP.$invalid">
<br>
<span ng-show="add_user.PDP.$error.required">PDP is required.</span>
<span ng-show="add_user.PDP.$error.pattern">PDP must be numeric.</span>
<span ng-show="add_user.PDP.$error.minlength">Not less than 5 digits.</span>
<span ng-show="add_user.PDP.$error.maxlength">Not more than 5 digits.</span>
</span>
</p>
<p><b>NRIC :</b>
<input type="text" placeholder="S--------" name="nric" ng-model="nric" ng-minlength="9" ng-maxlength="9" ng-pattern="@/^[STFG]\d{7}[A-Z]+$/" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.nric.$dirty && add_user.nric.$invalid">
<br>
<span ng-show="add_user.nric.$error.required">NRIC is required.</span>
<span ng-show="add_user.nric.$error.pattern">NRIC must be numeric.</span>
<span ng-show="add_user.nric.$error.minlength">Not less than 9 digits.</span>
<span ng-show="add_user.nric.$error.maxlength">Not more than 9 digits.</span>
</span>
</p>
<p><b>Password:</b>
<input type="password" placeholder="Enter a password" name="password" ng-model="password" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.password.$dirty && add_user.password.$invalid">
<br>
<span ng-show="add_user.password.$error.required">Password is required.</span>
</span>
</p>
<p><b>Repeat Password:</b>
<input type="password" placeholder="Repeat the password" name="password1" ng-model="password1" ng-pattern="password" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.password1.$dirty && add_user.password1.$invalid">
<br>
<span ng-show="add_user.password1.$error.required">Repeat Password is required.</span>
<span ng-show="add_user.password1.$error.pattern">Password mixmatch.</span>
</span>
</p>
<p><b>Email:</b>
<input type="email" placeholder="Enter your email" name="email" ng-model="email" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.email.$dirty && add_user.email.$invalid">
<br>
<span ng-show="add_user.email.$error.required">Email is required.</span>
<span ng-show="add_user.email.$error.email">Invalid email address.</span>
</span>
</p>
<p><b>Phone No. :</b>
<input type="text" placeholder="9-------" name="tel_no" ng-model="tel_no" ng-minlength="8" ng-maxlength="8" ng-pattern="/^[0-9]+$/" style='margin-left:10px;' required>
<span style="color:red" ng-show="add_user.tel_no.$dirty && add_user.tel_no.$invalid">
<br>
<span ng-show="add_user.tel_no.$error.required">Phone Number is required.</span>
<span ng-show="add_user.tel_no.$error.pattern">Phone Number must be numeric.</span>
<span ng-show="add_user.tel_no.$error.minlength">Not less than 8 digits.</span>
<span ng-show="add_user.tel_no.$error.maxlength">Not more than 8 digits.</span>
</span>
</p>
<p><label for="role"><b>Role :</b></label>
<select name="role" id="role" required
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption" style='margin-left:10px;' >
<option value="">-Select Role-</option>
</select>
<br>
<span class="error" style="color:red" ng-show="add_user.role.$dirty && add_user.role.$invalid">Role required.</span>
</p>
<p><label for="dept_id"><b>Department :</b></label>
<select name="dept_id" id="dept_id" required
ng-options="option.name for option in datas.availableOptions track by option.id"
ng-model="datas.selectedOption" style='margin-left:10px;'>
<option value="">-Select Dept ID-</option>
</select>
<br>
<span class="error" style="color:red" ng-show="add_user.dept_id.$dirty && add_user.dept_id.$invalid">Dept ID required.</span>
</p>
<p><label for="license_class"><b>License Class :</b></label>
<select name="license_class" id="license_class" required
ng-options="option.name for option in datass.availableOptions track by option.id"
ng-model="datass.selectedOption" style='margin-left:10px;'>
<option value="">-Select License Class-</option>
</select>
<br>
<span class="error" style="color:red" ng-show="add_user.license_class.$dirty && add_user.license_class.$invalid">License Class required.</span>
</p>
<p>
<button ng-click="save_user()" style='margin-left: 63px;margin-top:10px'
ng-disabled="(add_user.name.$dirty && add_user.name.$invalid ||
add_user.PDP.$dirty && add_user.PDP.$invalid ||
add_user.nric.$dirty && add_user.nric.$invalid ||
add_user.password.$dirty && add_user.password.$invalid ||
add_user.password1.$dirty && add_user.password1.$invalid ||
add_user.email.$dirty && add_user.email.$invalid ||
add_user.tel_no.$dirty && add_user.tel_no.$invalid ||
add_user.role.$dirty && add_user.role.$invalid ||
add_user.dept_id.$dirty && add_user.dept_id.$invalid ||
add_user.license_class.$dirty && add_user.license_class.$invalid)">Add User</button>
<input type="reset" data-icon="refresh" data-inline="true" data-mini="true" value="Reset" style='margin-left: 63px;margin-top:10px'>
</p>
</form>
<script type="text/javascript">
(function(angular) {
'use strict';
angular.module('myApp', [])
.controller('validateCtrl', ['$scope', function($scope, $http) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Transport Officer'},
{id: '2', name: 'Supervisor'},
{id: '3', name: 'Subordinate'}
],
};
$scope.datas = {
availableOptions: [
{id: '1', name: 'A'},
{id: '2', name: 'B'},
{id: '3', name: 'C'}
],
};
$scope.datass = {
availableOptions: [
{id: '1', name: 'Class 2'},
{id: '2', name: 'Class 3'},
{id: '3', name: 'Class 4'},
{id: '4', name: 'Class 5'}
],
};
$scope.errors = [];
$scope.msgs = [];
$scope.save_user = function() {
$scope.errors.splice(0, $scope.errors.length);
$scope.msgs.splice(0, $scope.msgs.length);
$http.post('register.php', {'uname':$scope.name, 'updp': $scope.PDP, 'unric': $scope.nric, 'upassword': $scope.password, 'urpassword' : $scope.password1, 'urole' : $scope.role, 'uemail' : $scope.email, 'utelno' : $scope.tel_no, 'udept' : $scope.dept_id, 'ulicenseclass' : $scope.license_class}
).success(function(data, status, headers, config ) {
if (data.msg != ' ')
{
$scope.msgs.push(data.msg);
}
else
{
$scope.errors.push(data.error);
}
}).errorr(function(data,status) {
$scope.errors.push(status);
});
}
}]);
})(window.angular);
<footer class="mainFooter">
<p>
Singapore Police Force © 2015
<br></br>
<a target="_blank" href="http://www.mha.gov.sg">
A Member of the Home Team</a>
</p>
</footer>
</body>
</div>
</html>
<?php
$con = mysqli_connect('localhost', 'username', 'password', 'databasename');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$names = mysqli_real_escape_string($con, $_POST['uname']);
$PDPs = mysqli_real_escape_string($con, $_POST['updp']);
$nrics = mysqli_real_escape_string($con, $_POST['unric']);
$passwords = mysqli_real_escape_string($con, $_POST['upassword']);
$roles = mysqli_real_escape_string($con, $_POST['urole']);
$emails = mysqli_real_escape_string($con, $_POST['uemail']);
$telnos = mysqli_real_escape_string($con, $_POST['utelno']);
$depts = mysqli_real_escape_string($con, $_POST['udept']);
$licenseclasss = mysqli_real_escape_string($con, $_POST['ulicenseclass']);
$qry_em = 'select count(*) as cnt from profiles where PDP ="' .$PDPs. '"';
$qry_res = mysqli_query($con, $qry_em);
$res = mysqli_fetch_assoc($con, $qry_res);
if ($res['cnt'] == 0) {
$qry = 'INSERT INTO profiles (PDP, nric, name, password, role, email, tel_no, dept_id, license_class) VALUES ("$PDPs", "$nrics", "$names", "$passwords", "$roles", "$emails", "$tel_nos", "$dept_ids", "$license_classs")';
$qry_res = mysqli_query($con, $qry);
if ($qry_res) {
$arr = array("msg" => "User Created Successfully!!!", "errorr" => "");
$jsn = json_encode($arr);
print_r($jsn);
} else {
$arr = array("msg" => "Error in adding user", "errorr" => "");
$jsn = json_encode($arr);
print_r($jsn);
}
} else {
$arr = array("msg" => "User already exists with the same PDP", "errorr" => "");
$jsn = json_encode($arr);
print_r($jsn);
}
mysqli_close($con);
?>
答案 0 :(得分:0)
在POST请求之前,您没有初始化$scope.license_class
,请定义它:
$scope.license_class = $scope.datass.selectedOption;
$scope.role
和$scope.dept_id
的相同品牌 - 问题出在您的选择ngModel