如何使用if语句javascript在角度验证表单

时间:2016-10-04 07:59:20

标签: javascript jquery html angularjs

我需要验证登录功能。我添加了我的Login.html文件和LoginController.js文件。我想通过使用这个javascript验证这一点。这是angularjs代码。之后我必须为这段代码设置php url。

Login.html

$scope.submitForm = function() {

  		var user_email = user_email;
  		var user_password = user_password;

  		if(user_email && user_password){

  			console.log(user_email);
        
  		}

  		

  	};
<div ng-controller="LoginController">
        <form name="userForm" ng-submit="submitForm()">

        <div class="list">
          <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text" name="user_email" ng-model="user.user_email" required>
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" name="user_password" ng-model="user.user_password" required>
          </label>
        </div>

        <span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span> </br>
        <span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>

        <button class="button button-block button-positive activated">Sign In</button>
        <button onclick="location.href='#/login/:friendId/register/';"  class="button button-block button-positive activated">Register</button>
        
        </form>
      </div>

1 个答案:

答案 0 :(得分:0)

对您提供的代码进行更改,点击注册/登录后,您可以通过submitForm()调用ng-click功能来评估表单值。请查看以下代码段以了解工作模式。

&#13;
&#13;
angular.module('myApp', ['ng'])

.controller('LoginController', ['$scope',
  function($scope) {
    $scope.user = {};
    $scope.submitForm = function() {

      var user_email = $scope.user.user_email;
      var user_password = $scope.user.user_password;

      if (user_email && user_password) {

        console.log(user_email);

      }
    };
  }
]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
  <form name="userForm">

    <div class="list">
      <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="text" name="user_email" ng-model="user.user_email" required>{{user.user_email}}
      </label>
      <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="user_password" ng-model="user.user_password" required>{{user.user_password}}
      </label>
    </div>

    <span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span> 
    </br>
    <span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>

    <button class="button button-block button-positive activated">Sign In</button>
    <button ng-click="submitForm()" class="button button-block button-positive activated">Register</button>

  </form>
</div>
&#13;
&#13;
&#13;