角度驗證錯誤
[英]Angular validation error
問題描述
我有兩種形式的注冊和登錄，代碼寫在單個控制器下，兩個函數調用提交第一個表單正常工作，但注冊總是在https://plnkr.co/edit/RS2LVc?p=preview中顯示錯誤預覽
var app = angular.module('abc', []);
app.controller('login', function ($scope) {
scope.LoginValidator = function ($event) {
if ($scope.LoginForm.$valid) {
console.log('Logged In');
} else {
console.log("invalid");
if ($scope.LoginForm.Email.$invalid) {
$scope.mailRequire = true;
}
if ($scope.LoginForm.password.$invalid) {
$scope.passRequire = true;
}
$event.preventDefault();
}
};
然后第二個函數從這里開始並顯示錯誤
$scope.SignupValidator = function ($event) {
if ($scope.SignupForm.$valid) {
console.log("Valid");
} else {
alert('InValid Data');
if ($scope.SignupForm.Fullname.$invalid) {
$scope.namerequire = true;
}
if ($scope.SignupForm.email.$invalid) {
$scope.emailrequire = true;
}
if ($scope.SignupForm.rollno.$invalid) {
$scope.rollrequire = true;
}
if ($scope.SignupForm.password.$invalid) {
$scope.passwordrequire = true;
}
if ($scope.SignupForm.confirm.$invalid) {
$scope.confirmrequire = true;
}
$event.preventDefault();
}
};
});
2 個解決方案
解決方案1
2 2017-08-24 05:53:28
單選按鈕中有錯誤， 要驗證單選按鈕，它需要一個值 。 所以將單選按鈕html改為下面，
<input type="radio" name='Gender' ng-model="gender" value="male" ng-required="!gender"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span>
<input type="radio" name='Gender' ng-model="gender" value="female" ng-required="!gender"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span>
解決方案2
1 已采納
我更新了plunkr文件請檢查： -
// Code goes here var app = angular.module('abc', []); app.controller('login', function ($scope) { $scope.LoginValidator = function ($event) { if ($scope.LoginForm.$valid) { console.log('Logged In'); } else { console.log("invalid"); if ($scope.LoginForm.Email.$invalid) { $scope.mailRequire = true; } if ($scope.LoginForm.password.$invalid) { $scope.passRequire = true; } $event.preventDefault(); } }; $scope.SignupValidator = function ($event) { if ($scope.SignupForm.$valid) { console.log("Valid"); } else { alert('InValid Data'); if ($scope.SignupForm.Fullname.$invalid) { $scope.namerequire = true; } if ($scope.SignupForm.email.$invalid) { $scope.emailrequire = true; } if ($scope.SignupForm.rollno.$invalid) { $scope.rollrequire = true; } if ($scope.SignupForm.password.$invalid) { $scope.passwordrequire = true; } if ($scope.SignupForm.confirm.$invalid) { $scope.confirmrequire = true; } $event.preventDefault(); } }; });
/* Styles go here */
<!DOCTYPE html> <html ng-app="abc"> <head> <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> <script src="script.js"></script> </head> <body ng-controller="login"> <br><br> <form id="login-form" action="/home" name="LoginForm" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator($event)"> <fieldset> <input type="email" name="Email" id="email" tabindex="1" ng-model="login.email" ng-pattern="/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/" placeholder="Email" ng-required="true"> <span style="color:red; display:block; text-align:center;" ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">* Please Enter Valid Email</span> <span style="color:red; display:block; text-align:center;" ng-show="mailRequire && !LoginForm.Email.$dirty">* Email required</span> <input type="password" name="password" ng-minlength="8" id="password" tabindex="2" ng-model="login.password" placeholder="Password" ng-required="true"> <div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid"><small style="color:red; display:block; text-align:center;">* Invalid Password</small></div> <span style="color:red; display:block; text-align:center;" ng-show="passRequire && !LoginForm.password.$dirty">* Password required</span> <input type="submit" value="LOG IN" /> </fieldset> </form> <br><br> <form id="Signup-form" name="SignupForm" action="/home" method="get" role="form" novalidate ng-submit="SignupValidator($event)"> <input type="text" id="fullname" name="Fullname" tabindex="1" placeholder="Full Name" ng-minlength="4" ng-model="signup.name" ng-required="true" /> <small style="color:red; display:block; text-align:center;" ng-show="SignupForm.Fullname.$error.minlength">* Atleast 4 characters</small> <span style="color:red; display:block; text-align:center;" ng-show="namerequire && !SignupForm.Fullname.$dirty">* Name required</span> <input type="email" name="email" id="email" tabindex="1" ng-pattern="/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/" placeholder="Email Address" value="" ng-model="signup.email" ng-required="true" /> <span style="color:red; display:block; text-align:center;" ng-show="SignupForm.email.$dirty && SignupForm.email.$error.pattern">* Please Enter Valid Email</span> <span style="color:red; display:block; text-align:center;" ng-show="emailrequire && !SignupForm.email.$dirty">* Email required</span> <input type="text" id="rollno" name="rollno" ng-minlength="8" tabindex="1" placeholder="Class Number Eg.(UOS131111)" ng-model="signup.roll" ng-required="true" /> <span ng-show="SignupForm.rollno.$error.minlength" style="color:red; display:block; text-align:center;">*Invalid Rollno </span> <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span> <input type="password" name="password" id="password" ng-minlength="8" tabindex="2" placeholder="Password " ng-model="signup.password" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" ng-required="true" /> <span ng-show="SignupForm.password.$error.minlength" style="color:red; display:block; text-align:center;"><small>* Minimum eight characters</small></span> <span ng-show="SignupForm.password.$error.pattern" style="color:red; display:block; text-align:center;"><small>* At least one digit</small></span> <span style="color:red; display:block; text-align:center;" ng-show="passwordrequire && !SignupForm.password.$dirty">* Password required</span> <input type="password" name="confirm" id="confirm-password" ng-minlength="8" tabindex="2" placeholder="Confirm Password" ng-model="signup.confirm" ng-pattern="signup.password" ng-required="true" /> <span ng-show="SignupForm.confirm.$error.pattern" style="color:red; display:block; text-align:center;"><small>* Password didn't match</small></span> <span style="color:red; display:block; text-align:center;" ng-show="confirmrequire && !SignupForm.confirm.$dirty">* Re enter Password</span> <input type="radio" name='Gender' ng-model="signup.gender" value="male" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span> <input type="radio" name='Gender' ng-model="signup.gender" value="female" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span> <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span> <input type="submit" value="SIGN UP" /> </form> </body> </html>
角度textarea驗證錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.