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)

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

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
Javascript 判断 object 的特定类转载
Feb 01 Javascript
javascript中的继承实例代码
Apr 27 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
深入理解angularjs过滤器
May 25 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 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
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP在线书签系统分享
2016/01/04 PHP
php可变长参数处理函数详解
2017/02/22 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Prototype Function对象 学习
2009/07/12 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
原生js实现分页效果
2020/09/23 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
会计专业导师推荐信
2014/03/08 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Python实现制作销售数据可视化看板详解
2021/11/27 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL