Angular 验证错误

Question

我有两种形式的注册和登录，代码是在单个控制器下编写的，有两个函数调用提交第一个表单工作正常，但注册总是显示错误在 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();
}

};
});

Answer 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>

Answer 2

单选按钮有误，要验证单选按钮，它需要一个值。所以将单选按钮 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>

Documentaion for radio button

Here is a WORKING DEMO

Angular 验证错误

Angular validation error

angularjs

validation

ng-submit