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+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
让python json encode datetime类型
2010/12/28 Python
跟老齐学Python之复习if语句
2014/10/02 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
学校社团活动总结
2015/05/07 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS