详细angular表单验证实例

一个angular实现的表单验证例子，包括用户名已存在验证，话不多说，看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" href="style/bootstrap.min.css">
	<link rel="stylesheet" href="style/css.css">
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="formCtrl" style="margin-top: 80px;">
<h1 class="text-center" style="margin-bottom: 60px;">用户注册</h1>
     <form class="form-horizontal" name="myForm" novalidate>
	     <div class="form-group">
	     	<label class="col-sm-4 control-label">用户名：</label>
	     	<div class="col-sm-4">
	     		<input type="text" class="form-control" name="name" 
	     		ng-model="user.name" 
	     		ng-blur="selectName()"
	     		required>
	     		<span class="text-warning" ng-show="myForm.name.$error.required">必填</span>
	     		<span class="text-danger" ng-show="user.show&&myForm.name.$dirty">用户名已存在</span>
	     		<span class="text-success" ng-show="myForm.name.$valid&&!user.show&&myForm.name.$touched">正确</span>
	     	</div>
	     </div>
	     <div class="form-group">
	     	<label class="col-sm-4 control-label">密码：</label>
	     	<div class="col-sm-4">
	     		<input type="password" class="form-control" name="pwd "
	     		ng-model="user.pwd" 
	     		ng-minlength="4"
	     		ng-maxlength="20"
	     		required>
	     		<span class="text-warning" ng-show="myForm.pwd.$error.required">必填</span>
	     		<span class="text-danger" ng-show="myForm.pwd.$error.minlength">密码至少4位</span>
	     		<span class="text-danger" ng-show="myForm.pwd.$error.maxlength">密码最长20位</span>
	     		<span class="text-success" ng-show="myForm.pwd.$valid">正确</span>
	     	</div>	
	     </div>
	     <div class="form-group">
	     	<label class="col-sm-4 control-label">密码确认：</label>
	     	<div class="col-sm-4">
	     		<input type="password" class="form-control" name="repwd"
	     		ng-model="user.pwd2" 
	     		required>
	     		<span class="text-warning" ng-show="myForm.repwd.$error.required">必填</span>
	     		<span class="text-warning" ng-show="myForm.repwd.$valid&&user.pwd2!=user.pwd">两次输入不一致</span>
	     		<span class="text-success" ng-show="myForm.repwd.$valid&&user.pwd2==user.pwd">正确</span>
	     	</div>	
	     </div>
	      <div class="form-group">
	     	<label class="col-sm-4 control-label">手机号：</label>
	     	<div class="col-sm-4">
	     		<input type="text" class="form-control" name="tel"
	     		ng-model="user.tel" 
                ng-pattern="/^1[34578]\d{9}$/"
	     		required>
	     		<span class="text-warning" ng-show="myForm.tel.$error.required">必填</span>
	     		<span class="text-danger" ng-show="myForm.tel.$error.pattern">无效手机号</span>
	     		<span class="text-success" ng-show="myForm.tel.$valid">正确</span>
	     	</div>	
	     </div>
	     <div class="form-group">
	     	<label for="" class="col-sm-4 control-label">邮箱：</label>
	     	<div class="col-sm-4">
	     		<input type="email" class="form-control" name="email" 
	     		ng-model="user.email" 
	     		required>
	     		<span class="text-warning" ng-show="myForm.email.$error.required">必填</span>
	     		<span class="text-danger" ng-show="myForm.email.$error.email">邮箱不合法</span>
	     		<span class="text-success" ng-show="myForm.email.$valid">正确</span>
	     	</div>
	     </div>
	     <div class="form-group">
	     	<div class="col-sm-4 col-sm-offset-4">
	     		<button type="submit" class="btn btn-success" style="width: 100%" 
	     		ng-click="add()" 
	     		ng-disabled="myForm.$invalid||user.pwd2!=user.pwd||user.show||myForm.$pristine">提交</button>
	     	</div>
	     </div>
     </form>
     	<div class="navbar-fixed-middle col-sm-2 block-center"><p class="bg-success" ng-bind="user.success"></p></div>
</div>

<script>
var app = angular.module('myApp', []);
//解决php接收不到问题，这块要注意，angular的一个小坑
 app.config(function($httpProvider) {
 	$httpProvider.defaults.transformRequest = function(obj) {
 		var str = [];
 		for (var p in obj) {
 			str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
 		}
 		return str.join("&");
 	};
 	$httpProvider.defaults.headers.post = {
 		'Content-Type': 'application/x-www-form-urlencoded'
 	}
 })
 // 表单数据提交给后台
app.controller('formCtrl', function($scope, $http) {
	$scope.user = {
		name: "",
		pwd:"",
		pwd2:"",
		tel:"",
		email:""
	}
	//检测用户名是否存在
	$scope.selectName = function() {
		$http({
			method: "post",
			url: "http://localhost/demo2/index.php/home/user/selectName",
			data: {
				name:$scope.user.name
			}	
		}).then(function(res){
			//后台判断数据库是否存在用户名，存在返回1，不存在返回0
           	$scope.user.show=res.data*1;//将string转换成number类型，不然绑定到ng-show上一直为真，算是一个坑吧
		})
	}
	//向数据库添加注册信息
	$scope.add = function() {
		$http({
			method: "post",
			url: "http://localhost/demo2/index.php/home/user/add",
			data: $scope.user	
		}).then(function(res){
			console.log(res.data)
           $scope.user.success=res.data;//后台输出“注册成功”
		})
	}
});
</script>
</body>
</html>

实现后的效果图：

当数据库有时显示用户已存在，当不存在是显示正确

后端部分代码，thinkphph框架写的

案例中的一些小坑已在代码中注释了，希望多家注意，由于自己也是刚刚自学，有什么错的地方还望指正，还有不懂php的同学可以尝试用下thinkphp写下后端验证，因为我也没学过php，感觉学angualr不会后端，学起来很痛苦，有没什么后端的朋友，所以就thinkphp和angular一起学了

详细angular表单验证实例

猜你喜欢