angular验证表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angular表单验证</title>
<style>
.box{width: 500px;height:auto;border:solid 1px #ccc;box-shadow: 2px 2px 8px #999;margin:100px auto;}
.box>div{box-shadow: -2px -2px 8px #999;padding: 25px;}
p{color: #f00;}
*{margin:0;padding:0 ;}
.name{margin-top: 15px;}
.name label{width: 70px;display: inline-block;}
</style>
</head>
<body>
<div class="box">
<div>
<h1>angular表单验证</h1>
<form ng-app="myApp" ng-controller="myCtrl" name="myForm" novalidate>
<div class="name">
<label>用户名：</label>
<input type="text" name="name" ng-model="name" required/>
<p ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.required">用户名是必填字段</span>
</p>
</div>
<div class="name">
<label>邮箱：</label>
<input type="email" name="email" ng-model="email" required/>
<p ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必填字段</span>
<span ng-show="myForm.email.$error.email">邮箱是不合法的</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.name.$dirty && myForm.name.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</div>
</form>
</div>
</div>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.name="零度沈";
$scope.email="1824484408@qq.com";
})
</script>
</body>
</html>
angular验证表单的更多相关文章
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- angular编写表单验证
angular编写表单验证 一.整体概述 表单内容如下图,包括常用的用户名.密码.确认密码.手机.邮箱等 整体js代码很少,就一个指令用于写确认密码和密码是否相等.其他 验证都是使用angular自带 ...
- angular.js表单验证
表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...
- 关于angular实现表单的一些问题
如何用angular实现表单的一些问题?核心步骤大概如下: 创建模型类 创建控制此表单的组件. 创建具有初始表单布局的模板. 使用ngModel双向数据绑定语法把数据属性绑定到每个表单输入控件. 往每 ...
- 使用Angular提交表单
使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载 ...
- angular的 表单
一般来讲表单可能遇到的问题:1.如何数据绑定.2.验证表单.3.显示出错信息.4.整个form的验证.5.避免提交没有验证通过的表单.6.防止多系提交. input属性:nameng-modelng- ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
- jquery.validate 使用--验证表单隐藏域
jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
随机推荐
- hdu_5964:平行四边形
打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...
- MySQL慢查询日志分析
一:查询slow log的状态,如示例代码所示,则slow log已经开启. mysql> show variables like '%slow%'; +-------------------- ...
- (转)java.util.Scanner应用详解
java.util.Scanner应用详解 java.util.Scanner是Java5的新特征,主要功能是简化文本扫描.这个类最实用的地方表现在获取控制台输入,其他的功能都很鸡肋,尽管Java ...
- JVM GC（整理）
1 GC类型 1 )YGC 一般情况下,当新对象生成,并且在Eden申请空间失败时,就好触发YGC ,堆Eden区域进行GC,清除非存活对象,并且把尚且存活的对象移动到Survivor区.然后整理S ...
- JavaWeb学习归档（一） - HTTP协议总结
版权声明:本文为博主原创文章,未经博主允许不得转载. 本文转载自我的个人博客:http://www.codingme.net/post/java-web-01 HTTP协议简介 超文本传输协议(HTT ...
- HDU6055 Regular polygon(计算几何）
Description On a two-dimensional plane, give you n integer points. Your task is to figure out how ma ...
- CentOS上javaweb开发环境搭建
CentOS上javaweb开发环境搭建 安装jdk yum list java* yum install java-1.7.0-openjdk* -y java -version 安装tomcat ...
- C#和NewSQL更配 —— CockroachDB入门（可能是C#下的全网首发）
阅读目录 CockroachDB是什么 环境部署 实战 性能测试 结语 一.CockroachDB是什么 CockroachDB(https://www.cockroachlabs.com)是Goog ...
- ffmpeg编解码视频导致噪声增大的一种解决方法
一.前言 ffmpeg在视音频编解码领域算是一个比较成熟的解决方案了.公司的一款视频编辑软件正是基于ffmpeg做了二次封装,并在此基础上进行音视频的编解码处理.然而,在观察编码后的视频质量时,发现图 ...
- Git时光机穿梭
我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...