您的位置：首页 > Web前端 > AngularJS

angularjs表单验证

2016-08-06 10:03 351 查看

为了界面显示的更加完美，这里也引入了bootstrap;

index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
.wrapper{
width: 200px;
margin: 30px auto;
}
input.error{
border: 1px solid #a10;
}
.error{

color: #a10;
}
/*p.error{
display: none;
}*/
</style>
</head>
<body ng-app="myApp" ng-controller="signUpController">
<div class="wrapper">
<h2>注册</h2>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group" ng-class="{'has-success':signUpForm.username.$valid}">
<label>用户名：</label>
<input name="username"
type="text"
class="form-control"
ng-model="userdata.username"
required
ng-minlength="4"
ng-maxlength="32"
>
<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">用户名长度应在4-32位之间</p>
</div>
<div class="form-group" ng-class="{'has-success':signUpForm.password.$valid}">
<label>密码：</label>
<input name="password"
type="password"
class="form-control"
ng-model="userdata.password"
ng-minlength="6"
ng-maxlength="255"
required
>
<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-225位之间</p>
</div>
<div class="form-group" ng-class="{'has-success':signUpForm.password2.$valid}">
<label>确认密码：</label>
<input name="password2"
type="password"
class="form-control"
ng-model="userdata.password2"
compare="userdata.password"
required
>
<p class="error" ng-if="signUpForm.password2.$error.compare && signUpForm.password2.$touched">两次输入不一致</p>
</div>
<div class="form-group">
<button class="btn btn-primary">注册</button>
</div>
</form>

</div>

<script src="angular.js"></script>
<script src="main.js"></script>
</body>
</html>main.js代码：
angular.module('myApp',[])
.controller('signUpController',function($scope)
{
$scope.userdata={}
$scope.submitForm=function(){
console.log($scope.userdata)
}

})
.directive('compare',function(){
var o={}
o.strict="EA";
o.scope={
orgText:'=compare'
}
o.require='ngModel';
o.link=function(scope,ele,attr,con){
con.$validators.compare=function(v){
return v==scope.orgText
}
scope.$watch('orgText',function(){
con.$validate();
})
}
return o;
})

难点在于进行两次密码验证的匹配，这里自己做了一个自定义指令来进行两次密码输入是否一致的验证；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航