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验证 第一种操作:主要是这三个函数 ...
随机推荐
- crossvcl.com - 用VCL开发MacOS软件
还没正式发布.用力戳 http://crossvcl.com/ 消息来源:Delphi G+ Group.具体信息还没完全披露,但是可以肯定的是,不是通过FireMonkey,而是通过原生的MacOS ...
- Window上装PHP开发环境 (XAMPP)
原作者:http://www.cnblogs.com/martin1009/archive/2011/11/11/2245794.html 1. 从www.apachefriends.org 上下载X ...
- CodeMIrror 简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便. codeMirror可以直接在 ...
- Selenium2学习-006-WebUI自动化实战实例-004-解决 Chrome 浏览器证书提示：--ignore-certificate-errors
此文主要讲述 Java 运行 Selenium 脚本时,如何消除 Chrome 浏览器启动后显示的证书错误报警提示,附带 Chrome 参数使浏览器最大化的参数. 希望能对初学 Selenium2 W ...
- iOS苹果开发者客服电话地址
苹果开发者客服电话地址:https://developer.apple.com/contact/phone.php 中国大陆地区客服电话:4006 701 855 中国香港地区客服电话:(852) 2 ...
- Android 利用ListView制作带竖线的多彩表格
1.listview与GridView 其实Android本身是有表格控件(GridView)的,但是GridView的每一列的宽度被限定为一样宽,有时设计表格时,列宽不可能为同一宽度,所有可以用Li ...
- 字符串拷贝函数strcpy写法_转
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...
- shell中引用其他脚本的方法
在Shell中引用其他脚本的方法是source filename.sh 或 . filename.sh 注意: . 和 filename.sh之间必须有空格
- Vue.2.0.5-单文件组件
介绍 在很多Vue项目中,我们使用 Vue.component 来定义全局组件,紧接着用new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方案在只是使用 ...
- autorelease应用
// // main.m // 02-autorelease应用 // // Created by apple on 14-3-18. // Copyright (c) 2014年 apple ...