angularjs表单验证

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值