AngularJS表單驗證開發(相關語法)（一）
阿新 • • 發佈：2019-01-23
最近身邊人都在學習angularjs，這個框架我以前看過。但是不是很熟練。現在通過一些網站學習。現在表單驗證用angularjs是非常智慧化和非常好用的。所以記錄我所學的。
學習的重點：
a 域$scope在angular中的意義
b 掌握angular基礎指令
c 動態驗證表單
（1）ng-model
html+css程式碼片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>anglarjs</title 注意我們的js部分要定義：
angular.module('myApp',[])
（2）ng-maxlenght和ng-minlenght的用法
其實這兩個的用法需要注意。當你符合其條件是。他才有相應的提示。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>anglarjs</title 需要注意的是。當你的長度滿足最小的長度是。它p標籤的值才會變。不然它不提示。
（3）ng-submit和ng-class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>anglarjs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/main.js"></script>
<style>
.error{
border:1px solid #f00;
}
</style>
</head>
<body ng-app='myApp' ng-controller="Main">
<form name="myForm" ng-submit="Main()">
<div class="form-about">
<label>使用者名稱：</label>
<input name="username"ng-model="username" ng-class="{'error':myForm.username.$invalid && myForm.username.$touched}" class="form-control" ng-minlength="4" required />
</div>
</form>
</body>
</html>script部分
//方法
.controller('Main',function($scope){
$scope.submitForm=function(){
console.log("表單提交了");
}
})這裡需要解釋一下。不然怕以後自己都忘記了。
1、必須要定義一個方法。引數必須要有域
2、定義了一個error類名。是為了驗證是否符合input
3、required 必須要加上
4、myForm.username.invalid && myForm.username.touched
要同時滿足兩個情況。一是$invalid，二是觸碰後的。後者沒加，往往會有使用者體驗效果不好。
5、ng-model=”username”也要加上。這往往是我最容易忘記 的地方