注册和验证表格与angularjs

I have a problem with a registration form on angularjs, I want to controle the form before submit and how can i save user data in text file or json (any solution for saving data), I did not manage to do it. For more information, I am working on a project : Interface for ReafctorErl public server - javascript (angular based).

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

the controller file :

控制器文件:

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

Service file is :

服务文件是:

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

Any help please ?? Thank you!

有什么帮助吗?谢谢!

2 个解决方案

#1

Better to follow https://docs.angularjs.org/guide/forms for html page that will reduce your angular controller code. and you can focus on service validation

最好关注hps页面的https://docs.angularjs.org/guide/forms,这将减少角度控制器代码。您可以专注于服务验证

Follow Binding to form and control state section of above link how to validate form.

按照Binding来形成和控制上面链接的状态部分如何验证表单。

#2

To your input text's u can use: ng-pattern and attribute required

对于您的输入文本,您可以使用:ng-pattern和attribute 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>

to find patterns you can see here:

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

HTML5 pattern

and for valite the whole form

而对于整个形式的valite

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

#1