angular实现form验证
先上效果页面：https://lpdong.github.io/myForm-1/
其中几个知识点
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验证的更多相关文章
- Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
- form验证及图片上传
form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...
- Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
- Asp.Net Form验证不通过,重复登录
问题产生根源: 当然,其实应该需要保持线上所有机器环境一致!可是,写了一个小程序.使用的是4.5,aysnc/await实在太好用了,真心不想把代码修改回去. so,动了念头,在这台服务器上装个4.5 ...
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
- Python Django的分页，Form验证，中间件
本节内容 Django的分页 Form 中间件 1 Django 分页 1.1 Django自带的分页 1.首先来看下我的测试数据环境 ############ models.py ######### ...
- Django中Form验证
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一,Form验证 第一种操作:主要是这三个函数 ...
- Django form验证
# 模版 class LoginForm(forms.Form): # 模版中的元素 user = forms.CharField(min_length=6,error_messages={" ...
- python自动化开发-[第二十一天]-form验证,中间件,缓存,信号,admin后台
今日概要: 1.form表单进阶 2.中间件 3.缓存 4.信号 5.admin后台 上节课回顾 FBV,CBV 序列化 - Django内置 - json.dumps(xxx,cls=) Form验 ...
随机推荐
- Problem - D - Codeforces Fix a Tree
Problem - D - Codeforces Fix a Tree 看完第一名的代码,顿然醒悟... 我可以把所有单独的点全部当成线,那么只有线和环. 如果全是线的话,直接线的条数-1,便是操作 ...
- 用Date.ToString()输出中英文月份
DateTime.Now.ToString("dddd,dd MMMM,yyyy")//输出 星期三,30 一月,2008DateTime.Now.ToString(" ...
- Linux iptables 防火墙详解
0x00 iptables介绍 linux的包过滤功能,即linux防火墙,它由netfilter 和 iptables 两个组件组成. netfilter 组件也称为内核空间,是内核的一部分,由一些 ...
- hibernate--一对多单向关联 (重点!!!)
多对一是在多的类上存在一的对象 一对多是在一的类上存在多的集合. 多的类 user.java: package com.bjsxt.hibernate; import javax.persistenc ...
- 关于iOS性能调优
性能调优一直都是作为高阶iOS开发者的一个入门门槛,下面我搜集了日常查阅资料中见到的各种高质量调优博文,仅供参考 UIKit性能调优实战讲解 iOS 高效添加圆角效果实战讲解
- html5绘图
html5绘图 这是我在绘图过程中遇到的问题,求助高手帮忙啊... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- Linux下gcc编译生成动态链接库*.so文件并调用它 是转载的
动态库*.so在linux下用c和c++编程时经常会碰到,最近在网站找了几篇文章介绍动态库的编译和链接,总算搞懂了这个之前一直不太了解得东东,这里做个笔记,也为其它正为动态库链接库而苦恼的兄弟们提供一 ...
- Linux系统的/proc目录
1. /proc目录 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机 制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它 ...
- Arduino线程库ProtoThreads
参考: Arduino线程库ProtoThreads 一个“蝇量级” C 语言协程库
- 13款Linux运维比较实用的工具
本文介绍几款Linux运维比较实用的工具,希望对Linux管理员有所帮助. 1.查看进程占用带宽情况-Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽. ...