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 ...
随机推荐
- linux和Windows实现文件共享之samba的安装与配置
背景: 项目需求linux的一个目录,需要在两台windows目录上面进行同时共享. 使用mount时发现,通过mount将同一个linux上面的目录挂载在两台windows机器上时,会出现文件隐藏的 ...
- android 7.0 多渠道打包 - 美团开源工具Walle 命令行打包
在Android 7.0(Nougat)推出了新的应用签名方案APK Signature Scheme v2后,之前快速生成渠道包的方式(美团Android自动化之旅-生成渠道包)已经行不通了,对此美 ...
- plsql修改表字段alter
场景:在生产过程中有时候需要不同的环境中修改表字段,使用sql语句比较方便! 1 演示 --添加字段的语法 alter table tablename add (column datatype [de ...
- （转）CentOS6.5下Redis安装与配置
场景:项目开发中需要用到redis,之前自己对于缓存这块一直不是很理解,所以一直有从头做起的想法. 本文详细介绍redis单机单实例安装与配置,服务及开机自启动.如有不对的地方,欢迎大家拍砖o(∩_∩ ...
- 【js】name 与 array 的纠葛 - 坑
一. 现象 var name = new Array(); typeof(name) // 为string 类型 var name = new Array('a' , 'b' , 'c'); ...
- WebService中的WSDL详解 及jmeter测试
首先简单讲解一下什么是wsdl. 一个WSDL文档通常包含8个重要的元素,即definitions.types.import.message.portType.operation.bin ...
- Eclipse Jetty插件安装
Eclipse Jetty插件安装 使用方法一: 本地资源包插件下载地址:http://pan.baidu.com/s/1sjNP5Id 或者是地址:http://pan.baidu.com/s/1b ...
- Python爬虫初学（二）—— 爬百度贴吧
Python爬虫初学(二)-- 爬百度贴吧 昨天初步接触了爬虫,实现了爬取网络段子并逐条阅读等功能,详见Python爬虫初学(一). 今天准备对百度贴吧下手了,嘿嘿.依然是跟着这个博客学习的,这次仿照 ...
- 快捷使用Node Inspector调试NodeJS
一:介绍 NodeJS开发有很多种调试方式,比如输出Log.WebStorm自带的调试器.Node Inspector等,其中Node Inspector是比较流行和被推荐的一种. 但是Node In ...
- theOS环境搭建
http://joeyio.com/ios/2014/01/01/make-a-mobile-substrate-tweak-using-theos/~/Doucment>: cd mytwea ...