Question

我在这里联系表格所有姓名，电子邮件，电话号码验证工作正常。但是，当我点击提交按钮时，警报不起作用，我使用ngMessage指令进行验证。我刚开始学习angularjs.So，还有其他替代方法进行验证，这种方法很简单，代码较少。

帮助将不胜感激..

这是我的代码。

var app = angular.module('myApp', ['ngMessages']);


app.controller('nameController', function ($scope) {
  
  $scope.submitForm = function() {
    alert('Form submitted');
    
  };
  
});

body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
  width: 50%;
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  color: #444444;
  background: #4cb0db;
}
.formbg label {
  display: block;
  margin: 0px 0px 5px;
}
.formbg input[type="text"], 
.formbg  input[type="email"], 
.formbg input[type="number"] {
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
}
div{
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>

<body ng-app="myApp">
  <form name="Testform" ng-controller="nameController" class="formbg">
    <label>First Name:</label>
    <input type="text" name="userName" ng-model="firstName" required />
    <div ng-messages="Testform.userName.$error">
      <div ng-message="required">This field is required</div>
    </div>

    <label>Email Address:</label>
    <input type="email" name="userEmail" ng-model="email" required />
    <div ng-messages="Testform.userEmail.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="email">Your email address is invalid</div>
    </div>

    <label>Phone Number:</label>
    <input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
    <div ng-messages="Testform.userPhoneNumber.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="pattern">Must be a valid 10 digit phone number</div>
    </div>
	
	  <button type="submit" 
  ng-submit="Testform.$valid && submitForm()">Submit</button>

  </form>
</body>

Answer 1

ng-submit应位于form代码而不是按钮

var app = angular.module('myApp', ['ngMessages']);


app.controller('nameController', function ($scope) {
  
  $scope.submitForm = function() {
    alert('Form submitted');
    
  };
  
});

body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
  width: 50%;
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  color: #444444;
  background: #4cb0db;
}
.formbg label {
  display: block;
  margin: 0px 0px 5px;
}
.formbg input[type="text"], 
.formbg  input[type="email"], 
.formbg input[type="number"] {
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
}
div{
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>

<body ng-app="myApp">
  <form name="Testform" ng-controller="nameController" class="formbg" ng-submit="submitForm()">
    <label>First Name:</label>
    <input type="text" name="userName" ng-model="firstName" required />
    <div ng-messages="Testform.userName.$error">
      <div ng-message="required">This field is required</div>
    </div>

    <label>Email Address:</label>
    <input type="email" name="userEmail" ng-model="email" required />
    <div ng-messages="Testform.userEmail.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="email">Your email address is invalid</div>
    </div>

    <label>Phone Number:</label>
    <input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
    <div ng-messages="Testform.userPhoneNumber.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="pattern">Must be a valid 10 digit phone number</div>
    </div>
	
	  <button type="submit" 
  >Submit</button>

  </form>
</body>

Answer 2

在提交按钮中，而不是ng-submit使用ng-click。

Demo link

Answer 3

您可以使用以下代码，

<form name="Testform" ng-controller="nameController" class="formbg" ng-
submit="submitForm()">
.
.
<button type="submit">Submit</button>

app.controller('nameController', function ($scope) {  
    $scope.submitForm = function() {
        if($scope.Testform.$valid == true)
        {
            alert('Form submitted');
        }
        else
        {
            alert('Form submit failed');
        }
    };
});

联系表单验证提交不使用角度js

3 个答案: