angular form 验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example34-production</title>
</head>
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form name="form" class="css-form" novalidate>
姓名:
<input type="text" ng-model="user.name" name="uName" required="" ng-maxlength="6"/>
<br />
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required" style="color:red;">name不能为空</div>
<div ng-show="form.uName.$error.maxlength" style="color:red;">name最大长度6</div>
</div> 手机号:
<input type="text" ng-model="user.phone" name="uphone" required="" ng-pattern="/^1[3|4|5|7|8][0-9]\d{8}$/"/>
<br />
<div ng-show="form.$submitted || form.uphone.$touched">
<div ng-show="form.uphone.$error.required" style="color:red;">phone不能为空</div>
<div ng-show="form.uphone.$error.pattern" style="color:red;">手机号格式不正确</div>
</div>
邮箱:
<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
<span ng-show="form.uEmail.$error.required" style="color:red;">email不能为空</span>
<span ng-show="form.uEmail.$error.email" style="color:red;">email格式不正确</span>
</div>
Gender:
<input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female
<br />
<input type="checkbox" ng-model="user.agree" name="userAgree" required="" ng-checked="user.agree"/>
同意协议
<br />
<div ng-show="form.$submitted || !user.agree">
<div ng-show="!user.agree" style="color:red;">选择同意协议</div>
</div>
<input type="submit" ng-click="update(form,user)" value="Save" />
</form>
</div>
<script src="angular.min.js"></script>
<script type="text/javascript">
(function(angular) {
'use strict';
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user={}
$scope.user.agree=true;
$scope.update = function(form,user) {
console.log(form.$invalid);
console.log(user);
if(form.$valid){
}
}; }]);
})(window.angular);
</script>
</body>
</html>
angular form 验证的更多相关文章
- angular form 验证 ngMessage
<!DOCTYPE HTML> <html ng-app="deliciousApp"> <head> <meta charset=&qu ...
- 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 ...
- 细说angular Form addControl方法
在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...
- form验证及图片上传
form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...
- 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验证 第一种操作:主要是这三个函数 ...
随机推荐
- 检测电脑安装的net framework版本
https://msdn.microsoft.com/en-us/library/hh925568(v=vs.110).aspx To find .NET Framework versions by ...
- ArcGIS API for Silverlight 之ElementLayer使用及TextSymbol的模板使用
原文:ArcGIS API for Silverlight 之ElementLayer使用及TextSymbol的模板使用 在开发中动态在地图上添加文字信息,可以使用TextSymbol添加文字 // ...
- An Implementation of Double-Array Trie
Contents What is Trie? What Does It Take to Implement a Trie? Tripple-Array Trie Double-Array Trie S ...
- Swift-10--错误处理
如何优雅地抛出错误-- 抛出错误使用throw关键字. 某个错误被抛出时,那个地方的某部分代码必要要负责处理这个错误,比如纠正这个问题.尝试另外一种方式.或是给用户提示这个错误. ***4种处理错误的 ...
- C#获取管理员权限
在进行C盘的读写时,有时会需要用到管理员权限 //找到位于 Properties 下面的 app.manifest 文件 将<requestedExecutionLevel level=&quo ...
- Virtio：针对 Linux 的 I/O 虚拟化框架
Virtio:针对 Linux 的 I/O 虚拟化框架 --http://www.ibm.com/developerworks/cn/linux/l-virtio/#ibm-pcon 使用 KVM 和 ...
- [BS-22] Objective-C中nil、Nil、NULL、NSNull的区别
Objective-C中nil.Nil.NULL.NSNull的区别 1.定义: nil: OC语言定义:#define nil __DARWIN_NULL / #define __D ...
- [转帖]Speed-BI数据分析案例：2016年8月汽车销量排行榜
[转帖]Speed-BI数据分析案例:2016年8月汽车销量排行榜 据中国汽车工业协会统计分析,2016年8月,乘用车市场表现较好,当月销量环比和同比均呈较快增长.1-8月,乘用车销量总体呈稳定增长, ...
- 商业智能BI和ERP的融合之路
企业在发展过程中为了更好的跟上同行业的步伐,甚至是为了在众多企业中脱颖而出,他们会主动寻求全面的企业解决方案.但是由于行业的快速发展,需求的不断增长,市面上的智能软件层出不穷,这也给了企业选择的困难. ...
- Activity的四种启动模式和onNewIntent()
转自:http://blog.csdn.net/linghu_java/article/details/17266603 Android中Activity启动模式详解 在Android中每个界面都 ...