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验证 第一种操作:主要是这三个函数 ...
随机推荐
- Architecture of a Highly Scalable NIO-Based Server
一. thread-per-connection The thread-per-connection approach uses an exclusive worker thread for each ...
- C中文件操作说明
r 以只读方式打开文件,该文件必须存在. r+ 以读/写方式打开文件,该文件必须存在. rb+ 以读/写方式打开一个二进制文件,只允许读/写数据. rt+ 以读/写方式打开一个文本文件,允许读和写. ...
- C/C++获取系统时间
C/C++获取系统时间需要使用Windows API,包含头文件"windows.h". 系统时间的数据类型为SYSTEMTIME,可以在winbase.h中查询到如下定义: ty ...
- Wordpress制作sidebar.php
调用 在主页以下方法可以调用模板中sidebar.php的内容 <?php get_sidebar(); ?> 判断是否自定义sidebar侧边栏: <?php if ( !func ...
- How to Move Magento to a New Server or Domain
Magento is one of the fastest growing eCommerce platforms on the internet and with its recent acquis ...
- Java学习-037-JavaWeb_006 -- JSP 动作标识 - include
这个动作是指在当前的页面中包含一个或多个 JSP 页面或者 HTML 文件,语法:<jsp:include file="../jsp/login.jsp" flush=&qu ...
- 通过SessionID和用户名来保证同一个用户不能同时登录(单点登录)
可以通过SessionID和用户名来保证同一个用户不能同时登录的问题,下面程序模仿了QQ的登录,当登录后判断当前帐号是否已经登录,如果登录.则踢掉以前登录的用户. 1.通过Application全局变 ...
- 你应该知道的2016年有关App开发的技术创新
上一篇简述了2016年有关App产品的年中总结,这篇开始历数有关App开发的技术创新!无论你是创业者,还是程序员,无论你是否懂编程.写代码,利用APICloud平台数据撰写的年中总结,集合了移动应用创 ...
- 读取、写入excel数据
在实际项目中,不可避免的会操作excel表格.一直以来都是读取excel表格,可今天为了写入excel表格,可是煞费苦心,终于完成,记录下来以便后续使用. 1.读取excel表格的数据 读取excel ...
- 发布自己的nuget包；报错source parameter was not specified
16-10-27 VS下使用 程序包管理器控制台 运行: 1.cd 命令走到 工程文件夹下,使用 ls 命令查看当前目录: 2. 使用 nuget spec 创建: 3. 使用 nuget pack ...