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验证 第一种操作:主要是这三个函数 ...
随机推荐
- android提供ToolBar实现划动菜单的陷阱
代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android: ...
- [LeetCode]题解（python）：034-Search for a Range
题目来源 https://leetcode.com/problems/search-for-a-range/ Given a sorted array of integers, find the st ...
- Surround the Trees---hdu1392（凸包GraHam模板）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1392 题意:有n棵树,每棵树有一个坐标,想用一些绳子把这些树包含起来,求需要绳子的长度: 就是求凸包的 ...
- Selenium2学习-006-WebUI自动化实战实例-004-解决 Chrome 浏览器证书提示：--ignore-certificate-errors
此文主要讲述 Java 运行 Selenium 脚本时,如何消除 Chrome 浏览器启动后显示的证书错误报警提示,附带 Chrome 参数使浏览器最大化的参数. 希望能对初学 Selenium2 W ...
- MFC之目录结构及消息流转（一）
跟上时代,用vs2010, 新建一个MFC应用程序Helloworld. 目录结构: 所有文件分为6个部分:解决方案相关文件.工程相关文件.应用程序头文件和源文件.资源文件.预编译头文件和编译链接生成 ...
- net异步线程注意事项
某人(不是我写的)写的异步代码:(还请博友们点评哈~) AsyncEventHandler[] asy = new AsyncEventHandler[ResultCount]; IAsyncRe ...
- iOS Architecture和Valid architectures
目前ios的指令集有以下几种: 1,armv6,支持的机器iPhone,iPhone2,iPhone3G及对应的iTouch 2,armv7,支持的机器iPhone4,iPhone4S 3,armv7 ...
- Interview Sort Function
QuickSort Java Code: import java.util.*; public class quickSort{ public static void main(String [] a ...
- php文件和目录操作函数
文件:打开和关闭:fopen(), fclose()读:readfile(), file(), file_get_contents(), fgets(), fgetss(), fgetc()写:fwr ...
- jni学习
Java Native Interface (JNI)标准是java平台的一部分,它允许Java代码和其他语言写的代码进行交互.JNI 是本地编程接口,它使得在 Java 虚拟机(VM) 内部运行的 ...