一个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一起学了