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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
微信小程序文章列表功能完整实例
Jun 03 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
PHP与已存在的Java应用程序集成
2006/10/09 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
php 伪静态之IIS篇
2014/06/02 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
php扩展开发入门demo示例
2019/09/23 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
Python实现将文本生成二维码的方法示例
2017/07/18 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
详解python变量与数据类型
2020/08/25 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
党员转正申请报告
2015/05/15 职场文书
天那边观后感
2015/06/09 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
python用tkinter开发的扫雷游戏
2021/06/01 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS