Angular使用ng-messages与PHP进行表单数据验证

Angular中的ng-messages提供了更方便的表单数据验证服务。

本文代码主要基于《AngularJS权威教程》中关于ng-messages模块的说明，但原文中不乏错误以及没有后台代码和示例，所以简单的实现其功能。//别的地方也有错误，我一度怀疑我买了盗版书==

比如我们想与后台进行表单数据合法性验证并给出输入操作提示

HTML代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="angular.js"></script>
  <script src="angular-messages.js"></script>
  <script>
  angular.module("app", ["ngMessages"])
    .directive("ensureUnique", function($http) {
      return {
        require: "?^ngModel",
        //原文中混用了ngModel和ctrl，这里统一使用ngModel，意指ngModelController
        link: function(scope, element, attrs, ngModel) {

          var url = attrs.ensureUnique;
          if (!ngModel) {
            return false;
          }
          ngModel.$parsers.push(function(val) {
            if (!val || val.length == 0) {
              return false;
            }

            //设置表单状态，属性统一归于signup_form.username.$error中，这是为设置是否合法状态，所以如果设置为false，则会在ng-messages中显示，因为它调用的是$error方法，意为是否“不合法”，原文有错误。
            ngModel.$setValidity("checkingAvailability", false);
            ngModel.$setValidity("usernameAvailability", true);

            $http({
              method: "POST",
              url: url,
              data: {
                username: val
              }
            }).then(function(r) {
              if ("exist" == r.data) {
                ngModel.$setValidity("checkingAvailability", true);
                ngModel.$setValidity("usernameAvailability", false);
              } else {
                ngModel.$setValidity("checkingAvailability", true);
                ngModel.$setValidity("usernameAvailability", true);
              }
            }, function(e) {
              console.log(e);
            })

            return val;
          })
        }
      }
    })
    .controller("MainController", function($scope) {
      $scope.signup = {
        username: ""
      }
    })
  </script>
</head>

<body>
  <div ng-controller="MainController">
    <form name="signup_form" novalidate ng-submit="signupForm()">
      <!-- 原文中指令放在了form元素中，应该放在input元素中 -->
      <input type="text" name="username" ng-model="signup.username" required ng-min-length=3 ng-max-length=10 ensure-unique="check.php">
      <!-- 输入过才显示操作信息 -->
      <div class="error" ng-show="signup_form.$dirty" ng-messages="signup_form.username.$error" ng-messages-multiple>
        <div ng-message="required">
          Required!!!
        </div>
        <div ng-message="checkingAvailability">
          Checking...
        </div>
        <div ng-message="usernameAvailability">
          Has been taken, please choose another.
        </div>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
      <p>{{signup_form.username.$error}}</p>
    </form>
  </div>
</body>

</html>

PHP代码：

<?php

  //Angular与jQuery传递参数类型不同，不能直接使用$.POST['username']获取;
  $postData = file_get_contents('php://input', true);
  $obj=json_decode($postData);

  //这里模拟唯一性验证
  if($obj->username == '123'){
    echo "exist";
  }
  else{
    echo "available";
  }
?>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJs表单验证实例详解

    AngularJs表单验证实例详解

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

  • AngularJS自动表单验证

    AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module. 有关angular-auto-validate: 安装:npm i angular-auto-validate 引用:<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js&qu

  • AngularJS手动表单验证

    所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm", 如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head> <meta charset="

  • AngularJS使用ngMessages进行表单验证

    AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="

  • AngularJS使用angular-formly进行表单验证

    当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type

  • 详解AngularJS实现表单验证

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • AngularJS中实现用户访问的身份认证和表单验证功能

    AngularJS中实现用户访问的身份认证和表单验证功能

    身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限.     一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们

  • Angular表单验证实例详解

    Angular表单验证实例详解

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht

  • 详细解读AngularJS中的表单验证编程

    详细解读AngularJS中的表单验证编程

    需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和

随机推荐