首页
所有分类
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图片切换的具体方法(带缩略图版)
Nov 12 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框（8）
Dec 26 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 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
blinker(1) Keras(3) 三子棋(2) turtle(1) 定时任务(2) MYSQL函数(1) Mysql报错(1) 信号库(1) 计时器(1) 绘图(1)
You might like
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript操作数组详解
2014/12/17 Javascript
jQuery中$this和$(this)的区别介绍（一看就懂）
2015/07/06 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后？
2018/08/14 DOTA
详解python Todo清单实战
2018/11/01 Python
python+opencv实现阈值分割
2018/12/26 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
美国顶尖折扣时尚购物网：Bluefly
2016/08/28 全球购物
Laura官网：加拿大女性的顶级时尚目的地
2019/09/20 全球购物
New Balance比利时官方网站：购买鞋子和服装
2021/01/15 全球购物
怎样自定义一个异常类
2016/09/27 面试题
经典而简洁的婚礼主持词
2014/03/13 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
绿色出行口号
2014/06/18 职场文书
中职招生先进个人材料
2014/08/31 职场文书
社区灵活就业证明
2014/11/03 职场文书
飞屋环游记观后感
2015/06/08 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
Java 死锁解决方案
2022/05/11 Java/Android