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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
layUI实现前端分页和后端分页
Jul 27 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php 文章调用类代码
2011/08/11 PHP
php获取url参数方法总结
2014/11/13 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
用cssText批量修改样式
2009/08/29 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python实现自动清理重复文件
2020/08/24 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
北京大学自荐信范文
2014/01/28 职场文书
植树节口号
2014/06/21 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
田径运动会广播稿
2015/08/19 职场文书
学生会干部任命书
2015/09/21 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
小数乘法教学反思
2016/02/22 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫