Angularjs - 表单验证

Angularjs - form validation

本文关键字：验证 表单 Angularjs      更新时间：2023-09-26

>im 尝试验证我的用户输入，并且用户可以按提交 BTN 并且它会错误地输入缺少的输入字段，以便用户知道他缺少什么输入。

我的问题是它仅在我删除action="/buy" method="post"时才有效，但是在没有错误时我需要它才能正常提交表单。

我该怎么做？

我使用此表单验证与angularjs验证 http://www.brentmckendrick.com/code/xtform/

<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
<label class="control-label" for="textinput">Fornavn <span class="star-color">*</span></label>
<input autocomplete="off" type="text" value="<?php echo set_value('fornavn'); ?>" name="fornavn" ng-model="fornavn" class="form-control" xt-validate required>
</div>
<button  id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>

</form>

您可以使用$http服务向服务器发送任何类型的请求。当您实际执行表单发布时，将使用内容类型发布：'application/x-www-form-urlencoded'。

对于您的请求，如果您可以设置正确的内容类型并对对象进行编码以正确发送，它将起作用。请参阅我之前创建的这个小提琴，它将数据作为标准表单帖子发送到服务器。

http://jsfiddle.net/cmyworld/doLhmgL6/

相关的$http请求如下所示

$scope.update = function (user) {
        $http({
            method: 'POST',
            url: 'https://mytestserver.com/that/does/not/exists',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: function (data) {
                var postData = [];
                for (var prop in data)
                postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
                return postData.join("&");
            },
            data: user
        });

您可以对输入字段进行建模，并将每个字段委托给模型

，如下所示： 
<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>
  <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
      <input autocomplete="off" type="text" name="fornavn" ng-model="fornavn.input1" class="form-control" xt-validate required>
   </div>
   <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn2.$invalid && !userForm.fornavn2.$pristine }">
      <input autocomplete="off" type="text" name="fornavn2" ng-model="fornavn.input2" class="form-control" xt-validate required>
   </div>
   <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn3.$invalid && !userForm.fornavn3.$pristine }">
      <input autocomplete="off" type="text" name="fornavn3" ng-model="fornavn.input3" class="form-control" xt-validate required>
  </div>
  <button  id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>
</form>

在控制器中，使用 $http 发送数据： 

    var baseUrl=<yourBaseUrl>;
    var url = baseUrl+'/buy';
    var data = $scope.fornavn;
    if(!$scope.userForm.$invalid){
      $http.post(url, data).
        success(function(data) {
          if (data.error_msg) {
              alert(data.error_msg);
          }else{
              alert("Successful! ");
          }
        }).
        error(function(data) {
          alert('error');
        });
      }
相关文章：