Angular表单验证实例详解-PHP开发-PHP中文网

首页

php教程

PHP开发

Angular表单验证实例详解

高洛峰

Dec 09, 2016 pm 02:53 PM

angular

表单验证

我去，我感觉我这个人其实还是一个很傻逼的一个人，老是因为拼错了一个单词或者怎么样就浪费我很长时间，这样真的不行不行，要正确对待这个问题，好了，说正题吧，angular也有表单验证minlength,maxlength,required呀这些个东西，还有也支持h5的那些验证,h5的那些验证，就是type啦，type='email',number,url呀这些，然后现在要用angular来验证，可以定义样式哈，不错，然后怎么验证呢，好的上代码

<!DOCTYPE html>
<html ng-app=&#39;app&#39;>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src=&#39;static/plugins/angular.min.js&#39;></script>
<script type="text/javascript" src=&#39;static/plugins/angular-messages.js&#39;></script>
</head>
<body>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message=&#39;email&#39;>正确的邮箱格式</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
angular.module("app", [&#39;ngMessages&#39;]);
</script>
</html>

登录后复制

这样就可以了，有几个点要声明一下，

　　第一就是要引入angular-messages.js，

　　第二就是message跟messages一定要看清楚啊，

　　第三myForm.name.$error:这个myForm就是form的name值,name就是要验证的input的name值。

　　第四就是这个还可以自定义验证哈。

　　恩第五的话明前还没有，大神们可以看看还有什么要注意的，欢迎指出。

自定义验证来说下怎么搞吧，上代码

<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />

登录后复制

你看这个ensure-unique就是自定义的验证，就是需要独一无二呗，这就是在html上的写法，自定义的js代码就是自己写啦，这里也有一个这个对应的代码，是用指令写的，恩上代码

angular.module(&#39;myApp&#39;, [])
.directive(&#39;ensureUnique&#39;, [&#39;$http&#39;, function($http) {
return {
require: &#39;ngModel&#39;,
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: &#39;POST&#39;,
url: &#39;/api/check/&#39; + attrs.ensureUnique,
data: {&#39;field&#39;: attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity(&#39;unique&#39;, data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity(&#39;unique&#39;, false);
});
});
}
};
}]);

登录后复制

看到没，html，js两步完成自定义验证，就是自定义验证我感觉有点我有点low啊，搞不太来。反正我贴这两段代码就是告诉你们自定义验证的写法是咋样的，哈哈

恩，还有就是anglar的表单验证属性哈，反正上表格吧，一目了然哈，这个都是菜鸟网上有的，你们可以去搜索搜索哈

然后呢，这个怎么用呢，好的，上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;validateCtrl&#39;, function($scope) {
$scope.user = &#39;John Doe&#39;;
$scope.email = &#39;john.doe@gmail.com&#39;;
});
</script>
</body>
</html>

登录后复制

这个的用法总结几点，

　　1.只要用一个angular.js不需要引入别的js,但是缺点是什么你懂的啦，不能验证更多的条件啦，嘿嘿，这个看自己需求啦。

　　2.就是她是用ng-show来显示的，这里的myForm.user.$error.required这些个是怎么来的，还是跟上面一样的哈，都是name值，这个就是这样啦，你看required必填嘛，就对应这个$dirty啦so....myForm.user.$dirty ，哈哈反正这些个代表的意思都在表格里啦。感觉这种的验证条件有效，还是那句话，看自己需求吧。

　　3.这种用法还有一个问题啊，就是比如说你要先验证一个required，你要是一开始输入框上没内容，他的那个验证提示是不会出现的，所以你要先js给它默认一个值，我感觉这种效果不好啊。所以你看到页面上$scope.user = 'John Doe';js给他先赋值了。

　　4.还要一个问题，你要先赋值嘛，然后你得搞个控制器啊，又得定义一个控制器，我感觉总结来说我还是觉得第一种方法好点吧。

　　5.还有一个问题，你每个Input记得绑定ng-model啊，要不然怎么监控。个人看法哈，

还有就是这两种其实也可以结合的，不行可以看代码。好的，上代码吧

<!DOCTYPE html>
<html ng-app=&#39;app&#39;>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src=&#39;static/plugins/angular.min.js&#39;></script>
<script type="text/javascript" src=&#39;static/plugins/angular-messages.js&#39;></script>
</head>
<body ng-controller=&#39;ctrl&#39;>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message=&#39;email&#39;>正确的邮箱格式</div>
</div>
名字 <input type=&#39;text&#39; name=&#39;name1&#39; ng-model=&#39;name1&#39; required>
<span style=&#39;color:red&#39; ng-show=&#39;myForm.name1.$dirty&#39;>
<span ng-show=&#39;myForm.name1.$error.required&#39;>名字是必须的</span>
</span>
</form>
</div>
</body>
<script type="text/javascript">
var app=angular.module("app", [&#39;ngMessages&#39;]);
app.controller(&#39;ctrl&#39;,function($scope){
$scope.name1=&#39;wenwen&#39;;
})
</script>
</html>

登录后复制

就是这样子。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7456

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

聊聊Angular中的元数据（Metadata）和装饰器（Decorator） Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习，带大家了解一下Angular中的元数据和装饰器，简单了解一下他们的用法，希望对大家有所帮助！

如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台，用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言，以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具，可帮助您编写、更新和测试代码。此外，它还提供了许多功能，如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先，您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，可让您在服务器端运行JavaScript代码。要在Ub

angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx，介绍一下NgRx的使用方法，希望对大家有所帮助！

浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor？下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用，希望对大家有所帮助！

一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

你知道 Angular Universal 吗？可以帮助网站提供更好的 SEO 支持哦！

Angular + NG-ZORRO快速开发一个后台系统 Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战，了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统，希望对大家有所帮助！

如何使用PHP和Angular进行前端开发 May 11, 2023 pm 04:04 PM

随着互联网的飞速发展，前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言，可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架，可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发，以及如何将它们