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下关于$.Ready()的分析
Dec 13 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python作用域与名字空间原理详解
2020/03/21 Python
利用python生成照片墙的示例代码
2020/04/09 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
大学三年的自我评价
2013/12/25 职场文书
大四学生思想汇报
2014/01/13 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
大学新生军训方案
2014/05/03 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
助学感谢信范文
2015/01/21 职场文书
酒桌上的开场白
2015/06/01 职场文书
鉴史问廉观后感
2015/06/10 职场文书
聘任书格式及范文
2015/09/21 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
导游词之日月潭
2019/11/05 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技