表单验证成功后加载图像

Loading image after form validation succedded

本文关键字：加载 图像 成功 验证 表单      更新时间：2023-09-26

我想在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>

角度脚本：

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;
        }
    };
});


 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" />

您可以在图像上使用ng-show，通过userForm.$valid检查表单是否有效（您根本不需要控制器来实现这一点）：

<form name="userForm">
    <img src="http://myimage.png" ng-show="userForm.$valid" />
    <!-- Your elements -->
</form>

请参阅下面的工作代码。当您的所有验证（如所有字段）都是必需的，正确的电子邮件和用户名中的长度标准是正确的时，您将在顶部看到一张图像，即当您的表单有效时。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="userForm" class="container" ng-app>
  <img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-10-512.png" ng-show="userForm.$valid" width="100px" />
       
  <!-- 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" required>
    <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" required>
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
  </div>
</form>

相关文章：