javascript - 表单验证成功后加载图像

Question

我想在 form 中的所有元素都通过验证时显示图像，即整个表单有效。

定义图像:

<div id="c3" ng-hide="myvalue" class="ng-hide" >
    <img src="D:/AngularJS/images/Assets/compleated .png"/>
</div>

声明表单和验证:

<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="user.name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>

<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>

<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email" >
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
</form>

Angular 脚本:

validationApp.controller('mainController', function($scope) {
    // function to submit the form after all validation has occurred    
    $scope.myvalue=true;
    $scope.submitForm = function() {
        // check to make sure the form is completely valid
        if ($scope.userForm.$valid) {
            $scope.myvalue=false;
        }
    };
});

Answer 1

 var app = angular.module('app', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

    <form name="form"> 
        Name*<input type="text" ng-model="name" name="name" required />
    </form>
    <img ng-show="form.name.$valid" ng-src="http://i.huffpost.com/gen/1068997/images/o-JASON-PRIESTLEY-facebook.jpg" /> 
</div>

这个有效:

<form name="form"> 
    <input type="text" ng-model="name" name="name" required />
</form>
<img ng-show="form.name.$valid" ng-src="http://i.huffpost.com/gen/1068997/images/o-JASON-PRIESTLEY-facebook.jpg" />