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 ...
随机推荐
- href设置action绝对路径和相对路径
绝对路径: 示例: <a href="<%=basePath %>account/list.action"></a> 注意:这里${basePa ...
- (转)@ContextConfiguration注解说明
场景:学习spring实战中相关的单元测试 1 正常使用 @ContextConfiguration Spring整合JUnit4测试时,使用注解引入多个配置文件 1.1 单个文件 @ContextC ...
- (转)SqlServer基础之(触发器)（清晰易懂）
阅读目录 一:触发器的优点 二:触发器的作用 三:触发器的分类 四:触发器的工作原理 五:创建触发器 六:管理触发器 概念: 触发器(trigger)是SQL server 提供给程序员和数据分析 ...
- Maven常用的几个核心概念
在使用Maven的过程中,经常会遇到几个核心的概念,准确的理解这些概念将会有莫大的帮助. 1. POM(Project Object Model)项目对象模型 POM 与 Java 代码实现了解耦,当 ...
- java 基础知识及Servlet基础
- 四．GC —三分钟认识JAVA回收机制（Java Garbage Collection）
这里以jdk1.8做讲解.Jdk1.8的分代去掉了永久代,只分为新生代(有的也译为年轻代)和年老代. 名词解释: 系统吞吐量:用于处理应用程序处理事务的线程数与用于GC的线程数的比. pause ti ...
- 移动端300ms点击事件的延迟
移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...
- 1. 数字根（Digital Root）
数字根(Digital Root)就是把一个自然数的各位数字相加,再将所得数的各位数字相加,直到所得数为一位数字为止.而这个一位数便是原来数字的数字根.例如: 198的数字根为9(1+9+8=18,1 ...
- NYOJ--42--dfs--一笔画问题
/* Name: NYOJ--42--一笔画问题 Author: shen_渊 Date: 18/04/17 15:22 Description: 这个题用并查集做,更好.在练搜索,试试手 本来用的v ...
- akoj-1319-四方定理
四方定理 Time Limit:1000MS Memory Limit:65536K Total Submit:28 Accepted:11 Description 数论中著名的"四方定理 ...