angularjs表单验证

最新推荐文章于 2019-02-25 14:33:00 发布

认真学前端

最新推荐文章于 2019-02-25 14:33:00 发布

阅读量3k

点赞数

分类专栏： js基础笔记

本文链接：https://blog.csdn.net/xlei1123/article/details/52134575

版权

js基础笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

为了界面显示的更加完美，这里也引入了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;
	})

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