angular最nb的地方不需要写一行js代码就能完成表单验证
2017-04-22 本文已影响0人
c59ffede9db6
在angular中做表单验证只需要几个简单的步骤
在创建表单的时候，angular会根据表单（form，input）等标签的name属性在作用域中创建一个变量
input表单的name属性属性定义在form元素name属性对应的变量内部
在作用域中第一次是根据form标签寻找name属性并映射到表单变量中
不论是表单form、元素，还是input元素对应的变量都有四个属性
-
$dirty 是否被修改过
true 已经被修改过
false 未被修改 -
$prisine 是否被修改过
true 已经被修改过
false 未被修改 -
$Valid
true 合法
false 不合法 -
$Invalid
true 不合法
false 合法
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>angular</title>
<style media="screen">
form nth-child(2){border: 1px solid red;}
</style>
<script src='bower_components/angular/angular.js'>
</script>
<script>
var app=angular.module('test',[]);
app.controller('con1',function($scope,$http){
$scope.submit=function(){
console.log($scope);
}
})
</script>
</head>
<body ng-app='test'>
<div ng-controller='con1'>
<form name="myform">
<label for="">
用户名：
<input type="text" name="usename" value="" required='required' ng-model='unname'>
</label><span ng-show='myform.usename.$invalid&&myform.usename.$dirty'>用户名必填</span><br>
<label for="">
密 码：
<input type="text" name="password" value="" required='required' ng-model='ps'><span ng-show='myform.password.$invalid&&myform.password.$dirty'>密码为必填项</span>
</label>
<div>
<button ng-click='submit()'>提交</button>
</div>
</form>
</div>
</body>
</html>
