黑马品优购商城-品牌管理anglurJs验证表单

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/87886023

实现的效果为

anglurJs的Controller改动如下

//判断字符是否为空的方法
		function isEmpty(obj){
		    if(typeof obj == "undefined" || obj == null || obj == ""){
		        return true;
		    }else{
		        return false;
		    }
		}
		//判断字符长度是否为1
		function strlen(str){  
		    var len = 0;  
		    for (var i=0; i<str.length; i++) {   
		     var c = str.charCodeAt(i);   
		    //单字节加1   
		     if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {   
		       len++;   
		     }   
		     else {   
		      len+=2;   
		     }   
		    }   
		    return len;  
		}  	
		

ng.controller('myController', function($scope,$controller, $http,brandService) {
	
		//继承baseController
		$controller('baseController',{$scope:$scope})
	
		//定义保存数据的对象
		$scope.branch = {};
		
		//查询品牌列表
		$scope.findAll = function() {
			brandService.findAll().success(function(response) {
				//响应返回结果集
				$scope.list = response;
			});
		}

		
		//分页
/* 		$scope.findPage = function(page, size) {
			$http.get('../branch/findPage.do?page=' + page + '&size=' + size)
					.success(function(response) {
						$scope.list = response.date;//显示当前页数据
						$scope.pageResultConf.totalItems = response.total;//显示总数据条数
					});
		} */
		

        // process the form
        $scope.processForm = function() {
            if(isEmpty($scope.branch.name)){
                $scope.errorName='品牌名称为空';
            }else{
             	$scope.errorName='';
            	
            	if(isEmpty($scope.branch.firstChar)){
                    $scope.errorSuperhero='品牌首字母为空';
                }else{
                	$scope.errorSuperhero='';
                		
                		if(strlen($scope.branch.firstChar) >1){
                			$scope.errorSuperhero='品牌的首字母错误,请重新输入';
                		}else{
                			$scope.errorSuperhero='';
                			
      						//新增/修改	
                			brandService.save($scope.branch).success(
                					function(response) {
                						if (response.success) {
                							//新增成功 刷新分页数据
                							$scope.loadList();
                							//关闭当前窗口
                							 $('#editModal').modal("hide");
                						} else {
                							alert(response.message);
                						}
                					});
                		}
                }
            }
            
        };
		

		
		$scope.changeBrand=function(id){
			brandService.changeBrand(id).success(
				function(response){
					$scope.branch=response;
				}
			)
		}
		
		//定义用于存放删除id的数组
		$scope.selectIds=[];
		
		
		
		//删除数组的元素
		$scope.deleteBranch=function(){
			if($scope.selectIds == false){
				alert("请勾选你要删除的品牌");
			}else{
				if(confirm("你真的要删除"+$scope.selectIds+"品牌?")){
					brandService.deleteBranch($scope.selectIds).success(
							function(response){
								if(!response.success){
									//刷新分页数据
									$scope.loadList();
									//把数组设为空
									$scope.selectIds=[];
								}else{
									alert(response.message)	
								}
							}
						)
				}
			}
			
		}
		
		//定义搜索对象
		$scope.searchEmtity={};
	
		//根据条件查询
		$scope.search=function(page,size){
			brandService.search(page,size,$scope.searchEmtity).success(
					function(response){
						$scope.list = response.date;//显示当前页数据
						$scope.pageResultConf.totalItems = response.total;//显示总数据条数		
					}
			)
		}
		

	});

页面的body为

	<!-- /.box-body -->
<form ng-submit="processForm()" novalidate  class="form-horizontal">
	<!-- 编辑窗口 -->
	<div 	class="modal fade" 
			id="editModal" 
			tabindex="-1" 
			role="dialog"
			aria-labelledby="myModalLabel" 
			aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h3 id="myModalLabel">品牌编辑</h3>
				</div>
				<div class="modal-body">
					<table class="table table-bordered table-striped" width="800px">
						<tr>
							<td><span style="color: red">*</span>品牌名称</td>
							<td><input 
									class="form-control"
									name="name"
									placeholder="品牌名称"
									error-message 
									ng-model="branch.name"
									required>
									<span style="color: red;" class="help-block" ng-show="errorName">{{ errorName }}</span>
									</td>
						</tr>
						<tr>
							<td><span style="color: red">*</span>首字母</td>
							<td><input  class="form-control" 
									    name="firstChar"
									    error-message
										placeholder="首字母" 
										ng-model="branch.firstChar" 
										required>
								<span style="color: red;" class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
							</td>
						</tr>
					</table>
					
				</div>
				<div class="modal-footer">
						 <button type="submit" class="btn btn-default">
           				 <span class="glyphicon glyphicon-flash"></span> 保存
        				 </button>
					<button class="btn btn-default" data-dismiss="modal"
						aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
</form>