AngularJS的稍复杂form验证
代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsSoccerFormCheck.rar
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
<head>
<title> New Document </title>
<style>
.username.ng-valid{
background-color:lightgreen;
}
.username.ng-invalid{
background-color:pink;
}
.userage.ng-valid{
background-color:lightgreen;
}
.userage.ng-invalid{
background-color:pink;
}
.usermail.ng-valid{
background-color:lightgreen;
}
.usermail.ng-invalid{
background-color:pink;
}
.userdate.ng-valid{
background-color:lightgreen;
}
.userdate.ng-invalid{
background-color:pink;
}
.usersn.ng-valid{
background-color:lightgreen;
}
.usersn.ng-invalid{
background-color:pink;
}
.userurl.ng-valid{
background-color:lightgreen;
}
.userurl.ng-invalid{
background-color:pink;
}
</style>
<meta charset="gbk">
<script src="angular1.4.6.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<table>
<tr>
<td width="50px">姓名:</td>
<td>
<input type="text" class="username" name="uname" ng-model="ctrl.user.name" required ng-minlength="4"/>
</td>
<td>
<span ng-show="myForm.uname.$error.required">This a required field</span>
<span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span>
<span ng-show="myForm.uname.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td width="50px">年龄:</td>
<td>
<input type="number" class="userage" name="uage" ng-model="ctrl.user.age" required ng-minlength="2"/>
</td>
<td>
<span ng-show="myForm.uage.$error.required">This a required field</span>
<span ng-show="myForm.uage.$error.minlength">Minimum length required is 2</span>
<span ng-show="myForm.uage.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td width="50px">邮件:</td>
<td>
<input type="email" class="usermail" name="umail" ng-model="ctrl.user.mail" required ng-minlength="3"/>
</td>
<td>
<span ng-show="myForm.umail.$error.required">This a required field</span>
<span ng-show="myForm.umail.$error.minlength">Minimum length required is 3</span>
<span ng-show="myForm.umail.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td width="50px">入职日期:</td>
<td>
<input type="date" class="userdate" name="udate" ng-model="ctrl.user.date" required ng-minlength="8"/>
</td>
<td>
<span ng-show="myForm.udate.$error.required">This a required field</span>
<span ng-show="myForm.udate.$error.minlength">Minimum length required is 8</span>
<span ng-show="myForm.udate.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td width="50px">SN:</td>
<td>
<input type="text" class="usersn" name="usn" ng-model="ctrl.user.sn" ng-pattern="/^SN-\d{4}$/"/>
</td>
<td>
<span ng-show="myForm.udate.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td width="50px">URL:</td>
<td>
<input type="url" class="userurl" name="uurl" ng-model="ctrl.user.url" />
</td>
<td>
<span ng-show="myForm.uurl.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td ></td>
<td colspan="2"><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td>
<td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
<!--
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
var self=this;
self.submit=function(){
console.log("User name="+self.user.name+
" age="+self.user.age+
" mail="+self.user.mail+
" date="+self.user.date+
" sn="+self.user.sn+
" url="+self.user.url);
alert("Form submitted.");
};
}]);
//-->
</script>
效果：
要点：
目前我感觉AngularJS对复杂表单的验证不是那么方便，对浏览器的依耐性也强。常规验证的JS代码其实不复杂，AngularJS的优势在此并不明显。
AngularJS的稍复杂form验证的更多相关文章
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- bootstrap + angularjs + seajs构建Web Form前端2
bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...
- angular实现form验证
先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...
- Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
- AngularJS $http配置为form data 提交
AngularJS $http配置为form data 提交 $scope.formData = {}; $http({ method: 'POST', url: '/user/', // pass ...
- Asp.Net Form验证不通过,重复登录
问题产生根源: 当然,其实应该需要保持线上所有机器环境一致!可是,写了一个小程序.使用的是4.5,aysnc/await实在太好用了,真心不想把代码修改回去. so,动了念头,在这台服务器上装个4.5 ...
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
- form验证及图片上传
form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...
- bootstrap + angularjs + seajs构建Web Form前端(1)
bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...
随机推荐
- ftp下出现“当前的安全设置不允许从该位置下载文件”提示
在资源管理器中使用ftp协议下载文件时,提示“当前的安全设置不允许从该位置下载文件”,下载失败. 解决方法: 1.在自己的电脑上打开Internet选项
- Sentinel系统监控Redis主从节点
author:JevonWei 版权声明:原创作品 blog:http://119.23.52.191/ --- 构建Sentinel监控Redis的主节点架构 拓扑结构结构 拓扑环境 master ...
- 低水平选手的自我救赎 （1）CLRS Exercise 16.5-2
题目大意 给定正整数 $n$ 和一个由 $m$ 个正整数构成的可重集合 $A$,满足 $\forall a\in A, a\le n$ 且 $m\le n$ . 定义 $N_t(A) = |\{a\i ...
- 练级（train）
练级(train) 试题描述 cxm 在迷宫中练级.迷宫可以看成一个有向图,有向图的每个边上都有怪物.通过每条边并消灭怪物需要花费 \(1\) 单位时间.消灭一个怪物可以得到一定数量的经验值.怪物被消 ...
- [HNOI2008][bzoj1009] GT考试 [KMP+矩阵快速幂]
题面 传送门 思路 首先,如果$n$和$m$没有那么大的话,有一个非常显然的dp做法: 设$dp[i][j]$表示长度为i的字符串,最后j个可以匹配模板串前j位的情况数 那么显然,答案就是$\sum_ ...
- 深入理解 Flutter 的编译原理与优化
阿里妹导读:对于开发者而言,Flutter工程和我们的Android/iOS工程有何差别?Flutter的渲染和事件传递机制如何工作?构建缓慢或出错又如何去定位,修改和生效呢?凡此种种,都需要对Flu ...
- 山贼集团 (group)
山贼集团 (group) 题目描述 某山贼集团在绿荫村拥有强大的势力,整个绿荫村由N个连通的小村落组成,并且保证对于每两个小村落有且仅有一条简单路径相连.小村落用阿拉伯数字编号为1,2,3,4,-,n ...
- 【bzoj3894】文理分科 网路流
[bzoj3894]文理分科 2015年3月25日3,4002 Description 文理分科是一件很纠结的事情!(虽然看到这个题目的人肯定都没有纠 结过) 小P所在的班级要进行文理分科.他的班 ...
- js 如何刷新页面
Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...
- 关于fixed定位的一些错误看法纠正
之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fi ...