首页
所有分类
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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
js实现多图左右切换功能
Aug 04 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
谈谈JS中的!!
Dec 07 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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
移动开发(2) 二维数组(2) 安卓(1) 循环(3) 嵌套(1) decorator(1) 装饰器(1) 分块(1) 查找算法(1) translation(2)
You might like
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python global关键字的用法详解
2019/09/05 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
英国最出名高街品牌：Forever Unique
2018/02/24 全球购物
马来西亚户外装备商店：PTT Outdoor
2019/07/13 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
六查六看六改心得体会
2014/10/14 职场文书
法律意见书范文
2015/05/20 职场文书
超级礼物观后感
2015/06/15 职场文书
《失物招领》教学反思
2016/02/20 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
九大龙王魂骨，山龙王留下躯干骨，榜首死的最憋屈(被捏碎)
2022/03/18 国漫