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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
基于javascript实现放大镜特效
Dec 03 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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 随机排序广告的实现代码
2011/05/09 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php生成HTML文件的类方法
2019/10/11 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
js表格分页实现代码
2009/09/18 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python阶乘求和的代码详解
2020/02/14 Python
PHP经典面试题
2016/09/03 面试题
银行批评与自我批评
2014/02/10 职场文书
厨师长岗位职责
2014/03/02 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
店铺转让协议书
2014/12/02 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
小学班主任评语
2014/12/29 职场文书
党小组评议意见
2015/06/02 职场文书
高中班长竞选稿
2015/11/20 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
win10下go mod配置方式
2021/04/25 Golang
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js