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 ...
随机推荐
- SQL Server2008 安装及概述
最近在学习SQL Server 数据库,用的版本是2008 R2的版本,如下图所示,本人学习时间不长,写这篇文章一是为了锻炼自己加深印象,二也可以与和诸多朋友进行交流以及得到大家的指教. 安装教程网上 ...
- Elasticsearch,Kibana,Logstash,NLog实现ASP.NET Core 分布式日志系统
Elasticsearch - 简介 Elasticsearch 作为核心的部分,是一个具有强大索引功能的文档存储库,并且可以通过 REST API 来搜索数据.它使用 Java 编写,基于 Apac ...
- 【javascript】变量作用范围
一.全局变量&局部变量 test="" 全局变量 var test="" 局部变量,无块的概念,作用域为function 或者script块 二.有意思 ...
- 【MYSQL】解决Mysql直接登录问题（删除匿名用户）(转)
刚安装的Mysql会存在匿名用户. 在命令行下输入mysql,(如果这时提示不是外部或内部指令,那就把mysql server文件下的bin目录添加到系统路径Path中) 如果没有任何提示,直接进入& ...
- 终极锁实战：单JVM锁+分布式锁
目录 1.前言 2.单JVM锁 3.分布式锁 4.总结 =========正文分割线================= 1.前言 锁就像一把钥匙,需要加锁的代码就像一个房间.出现互斥操作的场景:多人同 ...
- Android学习笔记-Adapter基础讲解
本节引言 从本节开始我们要讲的UI控件都是跟Adapter(适配器)打交道的,了解并学会使用这个Adapter很重要, Adapter是用来帮助填充数据的中间桥梁,简单点说就是:将各种数据以合适的形式 ...
- 一台机器启动多个tomcat简单配置
一台机器启动多个Tomcat只需要解决Tomcat端口冲突的问题. 相关配置:打开 Tomcat 目录下 conf \ server.xml 共修改三处端口,分别是: <Server port= ...
- TCP/IP 2MSL
TCP/IP连接包括两个端A和B 假如A首先终止连接,发送FIN,此时A进入FIN_WAIT_1: 收到来自B的ACK:进入FIN_WAIT_2,等待接收对方FIN,如果收到,进入2MSL状态 收到来 ...
- ASP.NET 导出excel文件出现乱码的解决办法
string html =TABLE ;//<table>标签,可以是多张表string modified = Regex.Replace(html, "<table &g ...
- swift UIButton边框添加阴影效果
btn.layer.shadowOpacity = 0.8 //阴影区域透明度 btn.layer.shadowColor = UIColor.black.cgColor // 阴影区域颜色 btn. ...