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验证 第一种操作:主要是这三个函数 ...
随机推荐
- HTTP访问的两种方式（HttpClient+HttpURLConnection）整合汇总对比
HttpClient: HttpClient是Apache Jakarta Common下的子项目,用来提供高效的.最新的.功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTTP协议最新的版 ...
- Four Operations---hdu5938（暴力）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5938 题意:给一个不超过20位并且大于2位的数字字符串(只包含1-9)然后找到适当的位置依次放入&qu ...
- Arbitrage---poj2240（floyd）
题目链接:http://poj.org/problem?id=2240 题意:有n个国家的,有m个关系,每个关系的格式是:A B C表示1单位的A国货币可以换B单位C国货币:求是否存在一种方法使得货币 ...
- svnChina的使用方法
粘贴svn里面项目的地址到Versions里面,这时候,就会显示里面文件夹,将鼠标点击在文件夹上,点击checkout,选择本地要存储的位置,项目就会导出在本地的文件夹.
- MVC中的@Html.DisplayFor如何控制日期的显示格式
在Sql Server中,如果将某字段定义成日期 时间 类型DateTime,那么在视图中会默认显示成年月日时分秒的方式(如 2013/8/6 13:37:33) 如果只想显示成年月日或者其他自定义形 ...
- SQL Server Logical/Physical Reads
Summary Info: Logical Reads : Reading Data pages from CachePhysical Reads : Reading Data pages ...
- 使用for打印小九九
使用shell的for语法打印小九九 #!/bin/bash `;do `;do if [ $a -ge $b ];then echo -en "$a x $b = $(expr $a \* ...
- shell脚本调试技术_转
转自:http://itlab.idcquan.com/linux/SHELL/727128.html 参考:https://linux.cn/article-8045-1.html 本文全面系统地介 ...
- 关于开源授权协议 GPL 和 LGPL
GPL 是 GNU General Public License (GNU 通用公共许可证)的缩写形式:LGPL 是 GNU Lesser General Public License (GNU 宽通 ...
- C# js asp.net 字符串MD5加密GetMD5Hash
赵小虎老师 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...