广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

微信小程序实战_Angular使用ng

日期:2021-01-12 浏览:
Angular使用ng-messages与PHP进行表单数据验证       这篇文章主要介绍了Angular使用ng-messages与PHP进行表单数据验证,ng-messages提供了更方便的表单数据验证服务,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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) {

//设置表单状态,属性统一归于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 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代码:

 //Angular与jQuery传递参数类型不同,不能直接使用$.POST['username']获取;
 $postData = file_get_contents('php://input', true); 
 $obj=json_decode($postData);
 //这里模拟唯一性验证
 if($obj- username == '123'){
 echo "exist";
 else{
 echo "available";

效果:

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




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系