首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

angular实现form验证实例代码

Posted in Javascript onJanuary 17, 2017

先上效果页面：

angular实现form验证实例代码

其中几个知识点

1、angularJs提供了几个新的type类型：

type="password"

type="email"

type="number"

type="url"

2、几个参数含义

ng-required      //是否必填，true/false

ng-minlength     //最小长度，数字

ng-maxlength     //最大长度，数字

min              //最小数字，数字，仅在type="number"下

max              //最小数字，数字，仅在type="number"

3、几个form控制变量，先来一段代码

<form role="form" name="myform" >
 <div class="form-group" >
 <label class="col-sm-2">用户名</label>
 <div class="col-sm-8">
   <input type="text" name="username" class="form-control" placeholder="请输入用户名"></div>
 </div>
</form>
formName.inputFieldName.$pristine   //字段是否未更改,对应上面的html代码即为 myform.username.$pristine

formName.inputFieldName.$dirty   //字段是否更改,对应上面的html代码即为 myform.username.$dirty

formName.inputFieldName.$valid   //字段有效,对应上面的html代码即为 myform.username.$valid

formName.inputFieldName.$invalid   //字段无效,对应上面的html代码即为 myform.username.$invalid

formName.inputFieldName.$error   //字段错误信息，使用频率比较高,对应上面的html代码即为 myform.username.$error

4、下面直接上代码，首先是html代码，使用了bootstrap.css样式，在结尾引入了angular

<!DOCTYPE html>
<html>
<head>
 <title>form验证</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body ng-app="formModule">
<div style="margin-top: 60px;">
 <form role="form" name="myform" class="form-horizontal container" ng-controller="formctrl">
 <!-- 用户名 -->
 <div class="form-group" ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}">
 <label class="col-sm-2">用户名</label>
 <div class="col-sm-8">
   <input type="text" name="username" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" class="form-control" placeholder="请输入用户名"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.username.$error.minlength">用户名必须大于5位</div>
 <div class="col-sm-2" ng-show="myform.username.$error.maxlength">用户名必须小于于10位</div>
 </div>
<!-- 密码 -->
<div class="form-group" ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}">
 <label class="col-sm-2">密 码</label>
 <div class="col-sm-8">
   <input type="password" name="password" ng-minlength="10" ng-required="true" ng-model="data.password" class="form-control" placeholder="请输入密码"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.password.$error.minlength">密码必须大于10位</div>
 </div>

 <!-- 确认密码 -->
 <div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}">
 <label class="col-sm-2">确认密码</label>
 <div class="col-sm-8">
   <input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="请输入确认密码"></div>
 <div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">两次密码不一致</div>
 </div>
 <!-- 邮箱 -->
 <div class="form-group" ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}">
 <label class="col-sm-2">邮 箱</label>
 <div class="col-sm-8">
   <input type="email" name="email" ng-required="true" ng-model="data.email" class="form-control" placeholder="请输入邮箱地址"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.email.$error.email">请输入正确邮箱地址</div>
 </div>
 <!-- 博客 -->
 <div class="form-group" ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}">
 <label class="col-sm-2">年 龄</label>
 <div class="col-sm-8">
   <input type="number" name="age" ng-required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="请输入您的年龄"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.age.$error.min&&myform.age$error.max">请输入正确年龄</div>
 </div>
 <!-- 年龄 -->
 <div class="form-group" ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}">
 <label class="col-sm-2">博 客</label>
 <div class="col-sm-8">
   <input type="url" name="blog" ng-required="true" ng-model="data.blog" class="form-control" placeholder="请输入博客地址"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.blog.$error.url">请输入正确博客地址</div>
 </div>
 <!-- 性别 -->
 <div class="form-group">
 <label class="col-sm-2">性 别</label>
 <div class="col-sm-8">
  <label class="radio-inline">
   <input type="radio" value="1" ng-model="data.sex" name="sex"> 男</label>
 <label class="radio-inline">
   <input type="radio" value="2" ng-model="data.sex" name="sex"> 女</label>
 </div>
 </div>
 <!-- 爱好 -->
 <div class="form-group">
 <label class="col-sm-2">爱 好</label>
 <div class="col-sm-8">
 <label ng-repeat="hoppy in hoppies" class="checkbox-inline">
  <input type="checkbox" name="hoppy[]" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{hoppy.name}}
 </label>
 </div>
 <div class="col-sm-2">{{data.Ahoppy.join('、')}}</div>
 </div>

 <!-- 地址 -->
 <div class="form-group">
  <label class="col-sm-2">地 址</label>
  <div class="col-sm-3">
   <select class="form-control" ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0"></select>
  </div>
  <div class="col-sm-3">
   <select class="form-control" ng-show="data.provinec" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityfilter:data.provinec"></select>
  </div>
  <div class="col-sm-3">
   <select class="form-control" ng-show="data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityfilter:data.area"></select>
  </div>
 </div>
 </form>
</div>

<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>

 下面为js代码（可能其中有些不妥之处，请指正，谢谢）

(function(window) {
 'use strict';
 var mymodule = angular.module('formModule', []);
 // 城市删选器
 mymodule.filter('cityfilter',function(){
  return function(data,parent){
   var cityData=[];
   angular.forEach(data, function(item, key){
    if(item.parent==parent){
     cityData.push(item);
    }
   });
   return cityData;
  }
 });
 mymodule.controller('formctrl', ['$scope', function($scope) {
  // 设定初始状态
  $scope.data={
   Ahoppy:[1,3]
  }
  // 爱好对象
  $scope.hoppies = [
  {id: 1,name: '玩游戏',checked: istrue(1)},
  {id: 2,name: '吃饭',checked: false}, 
  {id: 3,name: '睡觉',checked: false}, 
  {id: 4,name: '玩游戏',checked: true}
  ];
  // 城市
  $scope.cities=[
   {name:'河南',parent:0,id:1},
   {name:'郑州',parent:1,id:2},
   {name:'郑东新区',parent:2,id:3},
   {name:'金水区',parent:2,id:4},
   {name:'二七区',parent:2,id:5},
   {name:'信阳',parent:1,id:6},
   {name:'商城',parent:6,id:7},
   {name:'罗山',parent:6,id:8},
   {name:'杭州',parent:0,id:9},
   {name:'西湖区',parent:9,id:10},
   {name:'余杭区',parent:9,id:11},
   {name:'萧山区',parent:9,id:12},
   {name:'上城区',parent:9,id:13},
  ];
  
  // 判断是否是选中状态
  function istrue(id){
   for(var i=0;i<$scope.data.Ahoppy.length;i++){
    if($scope.data.Ahoppy[i]===id){
     return true;
    }
   }
   return false;
  };
  // 获取选中的爱好

  $scope.togglehoppy = function() {
   $scope.data.Ahoppy = [];
   angular.forEach($scope.hoppies, function(item, key) {
    if (item.checked == true) {
     $scope.data.Ahoppy.push(item.id);
    }
   });
  }

 }])
})(window)

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

angular实现form验证实例代码

- Author -

沛东

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题！
Nov 23 Javascript
jquery 插件学习（一）
Aug 06 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
angular分页指令操作
Jan 09 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
基于jQuery实现数字滚动效果
Jan 16 #Javascript
5种JavaScript脚本加载的方式
Jan 16 #Javascript
WebPack基础知识详解
Jan 16 #Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 #Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 #Javascript
函数四种调用模式以及其中的this指向
Jan 16 #Javascript
js实现导航栏中英文切换效果
Jan 16 #Javascript
NASA(1) 毅力号(1) 天问一号(1) 太空(1) 人造肉(1) 塑料(1) 火星(2) 美国航天局(1) 酶(1) 国际空间站(1)
You might like
十天学会php之第一天
2006/10/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
pytorch 数据集图片显示方法
2018/07/26 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python 多线程，threading模块，创建子线程的两种方式示例
2019/09/29 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
如何通过python检查文件是否被占用
2020/12/18 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国糖果店：Sugarfina
2019/02/21 全球购物
煤矿班组长的职责
2013/12/25 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
高一新生军训感言
2014/03/02 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
大学同学聚会感言
2015/07/30 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL