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


Posted in Javascript onDecember 28, 2016

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";
  }
?>

效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
微信小程序实现滚动消息通知
Feb 02 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
微信小程序rich-text富文本用法实例分析
May 20 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
Bootstrap中datetimepicker使用小结
Dec 28 #Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 #Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 #Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 #Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 #Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 #Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python生成数字图片代码分享
2017/10/31 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python内打印变量之%和f的实例
2020/02/19 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
销售总监岗位职责
2014/01/04 职场文书
四年级评语大全
2014/04/21 职场文书
2014年科协工作总结
2014/12/09 职场文书
趣味运动会简讯
2015/07/20 职场文书
2016年教师节感言
2015/12/09 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
GPU服务器的多用户配置方法
2022/07/07 Servers