如何使用AngularJS来进行表单验证
投稿于 被查看 29948 次 评论：41
如何使用AngularJS来进行表单验证
通过这个demo可以基本了解angular常用指令ng-app,ng-controller,ng-class,ng-if,ng-submit,ng-minlength,ng-maxlength等的使用，帮助理解scope（域）在angular中的意义，掌握如何使用angular来开发表单验证。
#####1、 html结构如下：
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用angularJS开开发表单验证</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
<style>
.form-wrap{font-family: "幼圆","Microsoft YaHei"}
.form-wrap .title{margin: 150px 0 30px;text-align: center;}
.form-group{position: relative;}
.form-group .success{position: absolute;top: 9px;right: 25px;color: #3c763d;}
.form-group .error{color: #a10;}
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="signUpCtrl">
<div class="form-wrap">
<form class="form-horizontal" name="signUpForm" ng-submit="submitForm();">
<h2 class="title">注册</h2>
<div class="form-group" ng-class="{'has-success' : signUpForm.username.$valid}">
<label class="control-label col-sm-3">用户名:</label>
<div class="col-sm-6">
<input class="form-control" name="username" ng-model="userdata.username" ng-minlength="2" ng-maxlength="30" required type="text">
<p class="fa fa-check success" ng-if="signUpForm.username.$valid"></p>
<p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched">用户名不能为空！</p>
<p class="error" ng-if="(signUpForm.username.$error.minlength || signUpForm.username.$error.maxlength) && signUpForm.username.$touched">用户名长度应为2-30个字</p>
</div>
</div>
<div class="form-group" ng-class="{'has-success': signUpForm.password.$valid}">
<label class="control-label col-sm-3">密码：</label>
<div class="col-sm-6">
<input class="form-control" name="password" ng-model="userdata.password" ng-minlength="6" ng-maxlength="30" required type="password">
<p class="fa fa-check success" ng-if="signUpForm.password.$valid"></p>
<p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched">密码不能为空！</p>
<p class="error" ng-if="(signUpForm.password.$error.minlength || signUpForm.password.$error.maxlength) && signUpForm.password.$touched">密码长度应为6-30个字</p>
</div>
</div>
<div class="form-group" ng-class="{'has-success':signUpForm.rePassword.$valid}">
<label class="control-label col-sm-3">确认密码：</label>
<div class="col-sm-6">
<input class="form-control" name="rePassword" ng-model="userdata.rePassword" compare="userdata.password" required type="password">
<p class="error" ng-if="signUpForm.rePassword.$error.compare && signUpForm.rePassword.$touched">两次密码不一致！</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary col-sm-offset-3">提交</button>
</div>
</form>
<!--信息提示-->
<div class="alert alert-success" role="alert" hidden>
<a href="javascript:void(0);" class="alert-link">注册成功！</a>
</div>
<div class="alert alert-danger" role="alert" hidden>
<a href="javascript:void(0);" class="alert-link">信息有误，请检查！</a>
</div>
</div>
</div>
<script src="https://code.angularjs.org/1.3.16/angular.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
#####2 、js代码如下：
javascript 代码
/**
* Created by vickyzhu on 2016/6/28.
*/
angular.module('myApp',[])
.controller('signUpCtrl',function($scope){
var oSucTips = document.getElementsByClassName('alert-success')[0],
oErrTips = document.getElementsByClassName('alert-danger')[0];
$scope.userdata = {}
$scope.submitForm = function(){
if($scope.signUpForm.$valid){
oErrTips.setAttribute('hidden','hidden');
oSucTips.removeAttribute('hidden');
}else{
oSucTips.setAttribute('hidden','hidden');
oErrTips.removeAttribute('hidden');
}
}
})
.directive('compare',function(){
//自定义指令compare，用于比较密码跟确认密码的值
var o = {};
o.scope = {
orgVal : '=compare'
};
//A:attribute ,E:element
o.strict = "AE";
o.require = 'ngModel';
o.link = function(sco,ele,attrs,ngModelController){
//给$validators添加compare指令
ngModelController.$validators.compare = function(modelVal){
//modelVal 为确认密码的值
return modelVal == sco.orgVal;
}
sco.$watch('orgVal',function(){
//监听orgVal，若有改动则进行比较
ngModelController.$validate();
});
}
return o;
})
如有需要，如何使用AngularJS进行表单验证demo代码
用户评论