AngularJS实现表单验证功能详解


Posted in Javascript onOctober 12, 2017

在ng中,针对表单和空间提供了属性,用于验证控件交互的状态

布尔类型:

ng-valid 表单通过验证时设置
ng-invalid 表单未通过验证时设置
ng-pristine 表单没有改动时设置
ng-dirty 表单有改动时设置

对象:

$error

注意事项:

①给表单以及表单组件 加上name属性
②给需要用到的表单组件 ,加上ngModel
③属性的用法
myForm.t_age.dirty/pristine/valid/invalid/$error

案例如下

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl">
 <form name="myForm" ng-submit="submitInfo()">
 <input type="text" name="t_name"
   ng-model="userName" required/>
 <span ng-show="myForm.t_name.$error.required">
  姓名不能为空
 </span>
 <br/>
 <input type="text" name="t_age"
   ng-model="userAge" required/>
 <span ng-show="myForm.t_age.$invalid">验证失败</span>
 <span ng-show="myForm.t_age.$pristine">没有输入过</span>

 <br/>
 <input
  ng-disabled="myForm.$invalid"
  type="submit" value="提交"/>
 </form>
</div>

<script>
 var app = angular.module('myApp', ['ng']);

 app.controller('myCtrl', function ($scope) {
 $scope.submitInfo = function () {
  console.log($scope.userName,$scope.userAge);
 }
 });
</script>
</body>
</html>

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

Javascript 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 #Javascript
AngularJS 中的数据源的循环输出
Oct 12 #Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
Angular实现预加载延迟模块的示例
Oct 12 #Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 #Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
You might like
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php curl基本操作详解
2013/07/23 PHP
php实现json编码的方法
2015/07/30 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python如何将函数值赋给变量
2020/04/28 Python
python和php哪个容易学
2020/06/19 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
疾病捐款倡议书
2014/05/13 职场文书
生物工程专业求职信
2014/09/03 职场文书
借名购房协议书范本
2014/10/06 职场文书
开幕式邀请函
2015/01/31 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL