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

最好关注this html页面，这将减少角度控制器代码。并且您可以专注于服务验证

按照上面链接的绑定到表单和控件状态部分，如何验证表单。

Answer 2

对于您输入的文字，您可以使用：ng-pattern and 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>

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

HTML5 pattern

和valite整个表格

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

注册和验证表格与angularjs

2 个答案: