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 ...
随机推荐
- maven学习（九）——maven中的坐标、依赖以及仓库
一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...
- JVM（8）：JVM知识点总览-高级Java工程师面试必备
http://www.importnew.com/23792.html jvm 总体梳理 jvm体系总体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 当然这些知识点 ...
- P2846 [USACO08NOV]光开关Light Switching
题目描述 Farmer John tries to keep the cows sharp by letting them play with intellectual toys. One of th ...
- 爱之箭发射（las）
爱之箭发射(las) 目描述 小海是弓道部的成员,非常擅长射箭(Love Arrow Shoot).今天弓道部的练习是要射一棵树.一棵树是一个nn个点n−1n−1条边的无向图,且这棵树的第ii个点有一 ...
- 【02】 Vue 之 数据绑定
2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定. 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的.通俗点说就是,Vue对象的改变会直接影响到HTML的标 ...
- [LeetCode] Populating Next Right Pointers in Each Node 深度搜索
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
- 关于eclipse总是出现adb refused request的问题（转）
1.检查下是不是开启了手机助手之类2.打开进程管理器,结束所有的adb.exe 3.关闭所有的杀毒软件之类的东东4.检查USB连接线,USB口,把USB线连在电脑主机后面的USB口5.重启eclips ...
- 常用 vim 命令总结
学习 vim ,是需要经常使用的,而这些命令,是我这段时间最常用的命令,很有效率的提高的我的文本编辑效率.----------------------------------------------- ...
- hdu 2582(数论相关定理+素数筛选+整数分解)
f(n) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- layui如何使用内部jQuery？
遇到问题情境: 由于Layui部分内置模块依赖jQuery,所以没有单独引入jQuery,但是在使用$常规写法获取dom元素时,提示未定义 出现问题的原因: 由于Layui部分内置模块依赖jQuery ...