首页
所有分类
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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
Bootstrap表单布局
Jul 19 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
基于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
JSON(10) SpringBoot(22) css3 (2) MapReduce(1) capture(1) pyqt5(3) Qlabel(1) MybatisPlus(2) self(1) Normal From(1)
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
js数组操作学习总结
2013/11/04 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python 公共方法汇总解析
2019/09/16 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解（Windows)
2020/08/07 Python
Python之字典对象的几种创建方法
2020/09/30 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
英国领先的品牌珠宝和配件供应商：Acotis Jewellery
2018/03/07 全球购物
Myprotein法国官网：欧洲第一运动营养品牌
2019/03/26 全球购物
GafasWorld西班牙：购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
高中地理教学反思
2014/01/29 职场文书
法制报告会主持词
2014/04/02 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
校园文明标语
2014/06/13 职场文书
单方离婚协议书范本（2014版）
2014/09/30 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
亮剑观后感300字
2015/06/05 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
关于感恩的作文
2019/08/26 职场文书