使用angularjs注册和验证表格

Question

我在angularjs上的注册表单有问题，我想在提交之前控制表单，如何将用户数据保存在文本文件或json（任何用于保存数据的解决方案）中，但我没有做到这一点。 有关更多信息，我正在研究一个项目：ReafctorErl公共服务器的接口-javascript（基于角度）。

registration.html：

 <div class="register"> <div class="box"> <h4> Sign Up</h4> <p> Enter your personal details below: </p> </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"> <a href="#/login" class="btn btn-link">Back</a> <button type="submit" class="btn btn-primary" onclick="return verif();">Submit</button> </div> </br> </form> </div> </div> <script language="javascript"> function verif(){ if (document.getElementById('password').value != document.getElementById('password_again').value) { document.getElementById('password_again').setCustomValidity('Passwords must match.'); } else { document.getElementById('password_again').setCustomValidity(''); } } </script> 

控制器文件：

 'use strict'; function RegisterCtrl($scope, reg) { var credentials = { fullname: "", organisation: "", address: "", email: "", username: "", password: "", password_again: "" }; $scope.credentials = credentials; $scope.restricted = window.restrictedMode; $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; } if( $scope.credentials.password.length<3 ) { alert("Password required!"); return false; } if( $scope.credentials.password_again.length<3 ) { alert("Password again required!"); return false; } 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); }; } 

服务文件是：

 'use strict'; /*just trying todo something here */ angular.module('referl.services').service('reg', function($q, $http, $location, $rootScope, $window) { var reg = { register: function(fullname, organisation, address, email, username, password, password_again, navigateOnSuccess) { var parameters = { fullname: fullname, organisation: organisation, address: address, email: email, username: username, password: password, password_again: password_again }; $http.get("api/register", {params: parameters}).success(function(response) { if(response.error) { alert(response.error); } else { alert("Success"); } }); } }; $rootScope.reg = reg; return reg; }); 

任何帮助，请?? 谢谢！

Answer 1

最好遵循https://docs.angularjs.org/guide/forms for html页面，这会减少您的角度控制器代码。 您可以专注于服务验证

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

Answer 2

对于您输入的文本，您可以使用：ng-pattern和required属性

<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模式

而为了使整个形式变质

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