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="[email protected]";
})
</script>
</body>
</html>

时间： 2024-08-28 23:47:42

angular验证表单的相关文章

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

angular的 表单

一般来讲表单可能遇到的问题:1.如何数据绑定.2.验证表单.3.显示出错信息.4.整个form的验证.5.避免提交没有验证通过的表单.6.防止多系提交. input属性:nameng-modelng-requiredng-minlengthng-maxlengthng-patternng-change值变化时的回调 {{myForm.username.$error}} Form控制变量字段是否未更改formName.inputFieldName.$pristine字段是否更改formName.i

使用Angular提交表单

使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载Angular 2. 设置module 3. 这是controller 4. 将module和controller应用于HTML 5. 设置双向变量绑定 6. 这是错误和信息 看起来好像是很多内容,但是最终,我们会用非常少的代码,并且看起来会非常简洁.另外,创建带有更多输入更大的表单,也会更容易. Angul

验证表单是否为空

验证表单是否为空,或者全是数字 可以用   var  reg = /^\s*(\S+)\s*$/;  正则表达式判断. var reg = /^\s*(\S+)\s*$/; if(reg.test(list[i].value)){ //将空格替换 RegExp.$1捕获匹配的非空格 list[i].value=RegExp.$1; }else{ alert('不能为空'); return; }

js 验证表单 js提交验证类

js 验证表单 js提交验证类 附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i<obj.oo.length;i++)         if(obj.oo[i].checked==true) return true; alert("请选择")return false; }</script><form id="f

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

ExtJS学习笔记3：加载、提交和验证表单

加载数据 1.比较好用的设置form数据的方法: formPanel.getForm().setValues([{id: 'FirstName', value: 'Joe'}]); 其中id值为form中field的name属性值,value为要赋的值 2.通过对象赋值: Ext.define('Request', { extend: 'Ext.data.Model', fields: [ 'FirstName', 'LastName', 'EmailAddress', 'TelNumberCo

ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

表单的属性和方法, 获取表单和表单的元素, 验证表单

表单的属性和方法 一. 表单字段的属性(id/name/value/form),这里用value属性来举例 上面的form属性代表获取表单字段的父级表单对象 1. 属性的获取         console.log(document.myform.username.value); 2. 属性的设置            document.myform.username.value="123"; 3. 获取表单字段的父级表单对象 console.log(document.myform.u