2016-01-05 157 views
0

我有一个关于angularjs的注册表单的问题,我想在提交之前控制表单,以及如何将用户数据保存在文本文件或json(用于保存数据的任何解决方案)中,我做了没有办法做到这一点。 欲了解更多信息,我正在一个项目:ReafctorErl公共服务器接口 - JavaScript(基于角)。注册和验证表单与angularjs

registration.html:

<div class="register"> 
 
    <div class="box"> 
 
\t <h4> Sign Up</h4> 
 
\t <p> Enter your personal details below: </p> 
 
\t </br> 
 
    <form role="frmRegister" name="frmRegister" ng-submit="register()" > 
 
     <div class="form-group"> 
 
     <input class="form-control" type="text" id="fullname" placeholder="Full Name" ng-model="credentials.fullname"/> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <input class="form-control" type="text" id="organisation :" placeholder="Organisation" ng-model="credentials.organisation" /> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <input class="form-control" type="text" id="address :" placeholder="Address" ng-model="credentials.address" /> 
 
     </div> 
 

 
     <p> Enter your account details below: </p> 
 
     <div class="form-group"> 
 
     <input class="form-control" type="email" id="email" placeholder="Email" ng-model="credentials.email" /> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <input class="form-control" type="text" id="username" placeholder="Username" ng-model="credentials.username" /> 
 
     </div> 
 

 
     <div class="form-group" > 
 
     <input class="form-control" type="password" id="password" placeholder="Password" ng-model="credentials.password" /> 
 
     </div> 
 

 
     <div class="form-group" > 
 
     <input class="form-control" type="password" id="password_again" placeholder="Password again" ng-model="credentials.password_again" /> 
 
     </div> 
 

 
     <div class="form-actions"> 
 
     \t <a href="#/login" class="btn btn-link">Back</a> 
 
     <button type="submit" class="btn btn-primary" onclick="return verif();">Submit</button> 
 
     </div> 
 
     </br> 
 
\t </form> 
 

 
</div> 
 
</div> 
 
<script language="javascript"> 
 
function verif(){ 
 

 
\t if (document.getElementById('password').value != document.getElementById('password_again').value) { 
 
    \t document.getElementById('password_again').setCustomValidity('Passwords must match.'); 
 
\t } 
 
\t else { 
 
    \t \t document.getElementById('password_again').setCustomValidity(''); 
 
\t } 
 
    
 
} 
 
</script>

控制器文件:

'use strict'; 
 

 
function RegisterCtrl($scope, reg) { 
 
\t var credentials = { 
 
\t \t fullname: "", 
 
     organisation: "", 
 
     address: "", 
 
     email: "", 
 
     username: "", 
 
\t \t password: "", 
 
     password_again: "" 
 
\t }; 
 
    $scope.credentials = credentials; 
 
    $scope.restricted = window.restrictedMode; 
 
\t $scope.register = function() { 
 
     
 
     if($scope.frmRegister.fullname.length<1) { 
 
      alert("Full Name required!"); 
 
      return false; 
 
     } 
 

 
     if($scope.credentials.organisation.length<1) { 
 
      alert("Organisation required!"); 
 
      return false; 
 
     } 
 

 
     if($scope.credentials.address.length<1) { 
 
      alert("Address required!"); 
 
      return false; 
 
     } 
 

 
     if($scope.credentials.email.length<1) { 
 
      alert("Email required!"); 
 
      return false; 
 
     } 
 

 
     if($scope.credentials.username.length<1) { 
 
      alert("Username required!"); 
 
      return false; 
 
     } 
 
\t \t 
 
\t \t if($scope.credentials.password.length<3) { 
 
      alert("Password required!"); 
 
      return false; 
 
     } 
 

 
     if($scope.credentials.password_again.length<3) { 
 
      alert("Password again required!"); 
 
      return false; 
 
     } 
 
\t reg.register($scope.credentials.fullname, $scope.credentials.organisation, $scope.credentials.address, 
 
    $scope.credentials.email, $scope.credentials.username, $scope.credentials.password, $scope.credentials.password_again, true); 
 
\t }; 
 
}

服务文件是:

'use strict'; 
 

 
/*just trying todo something here */ 
 

 

 
angular.module('referl.services').service('reg', function($q, $http, $location, $rootScope, $window) { 
 

 
\t var reg = { 
 

 
\t \t register: function(fullname, organisation, address, email, username, password, password_again, navigateOnSuccess) { 
 
\t \t \t var parameters = { 
 
\t \t \t \t fullname: fullname, 
 
\t \t \t \t organisation: organisation, 
 
\t \t \t \t address: address, 
 
\t \t \t \t email: email, 
 
\t \t \t \t username: username, 
 
\t \t \t \t password: password, 
 
\t \t \t \t password_again: password_again 
 

 
\t \t \t }; 
 
\t \t \t $http.get("api/register", {params: parameters}).success(function(response) { 
 
        if(response.error) { 
 
         alert(response.error); 
 
        } else { 
 
        \t \t alert("Success"); 
 
        } 
 
\t \t \t \t }); 
 
\t \t \t 
 
\t \t } 
 

 

 

 

 
\t }; 
 
\t $rootScope.reg = reg; 
 
\t return reg; 
 
});

任何帮助,请? 谢谢!

+0

与Erlang标签有什么直接关系? –

回答

0

更好地按照https://docs.angularjs.org/guide/forms为HTML页面,这将减少您的角度控制器代码。你可以专注于服务验证

跟着绑定到表单和控制状态部分上面的链接如何验证表单。

0

要在输入文本的u可以使用:NG-模式和属性需要

<form name="exampleForm" class="form-horizontal"> 
<div class="form-group"> 
    <input class="form-control" type="text" id="fullname" placeholder="Full Name" ng-model="credentials.fullname" ng-pattern="INSERT PATTERN" required/> 
    </div> 
</form> 

找到模式,你可以在这里看到:

HTML5 pattern

和valite整个表单

<button class="btn btn-primary" ng-click="myFunction()" ng-disabled="exampleForm.$invalid">Button</button>