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";
}
?>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex
-
AngularJS中实现用户访问的身份认证和表单验证功能
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们
-
AngularJS手动表单验证
所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm", 如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head> <meta charset="
-
Angular表单验证实例详解
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht
-
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和
-
AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type
-
AngularJs表单验证实例详解
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="
-
AngularJS使用ngMessages进行表单验证
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="
-
AngularJS实现表单验证
虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&