当我们像后台提交表单时，前端表单的验证是最重要的，因为我们前端要尽量保护后端，所以一切有必要的验证我们在前端做即可.
最近一直在做关于坏客户列表和黑名单内容管理系统 所以将平时写的一些基本代码显示如下
1、像后台插入数据时 前端表单验证如下
<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form" name="addForm"> <div class="input-group"> <span class="input-group-addon">公司名称</span> <input ensure-exist="exist" name="companyName" type="text" class="form-control" placeholder="Twitterhandle" ng-model="badCus.companyName" required> <div class="error" ng-show="addForm.companyName.$dirty&&addForm.companyName.$invalid"> <small class="error" ng-show="addForm.companyName.$error.required">用户名不能为空</small> <small class="error" ng-show="addForm.companyName.$error.exist">公司名称不在码表中</small> </div> </div> <div class="input-group"> <span class="input-group-addon">出险日期</span> <input type="text" class="form-control" readonly max-date="maxDate" uib-datepicker-popup="yyyy-MM-dd" is-open="dateFopened" ng-model="badCus.dangerDate" ng-click="dangerDateFopen($event)" placeholder="请选择日期" /> </div> <div class="input-group"> <span class="input-group-addon">信息来源</span> <input type="text" class="form-control" placeholder="Twitterhandle" ng-model="badCus.informationSource" required> </div> <div class="input-group"> <span class="input-group-addon">持仓公司</span> <input type="text" class="form-control" placeholder="Twitterhandle" ng-model="badCus.holdCompany" required> </div> <div class="input-group"> <span class="input-group-addon">风险类型</span> <input type="text" class="form-control" placeholder="Twitterhandle" ng-model="badCus.riskType" required> </div> <div class="input-group"> <span class="input-group-addon">持仓金额</span> <input type="number" class="form-control" placeholder="Twitterhandle" ng-model="badCus.holdAmount" required> </div> <div> <button ng-disabled="addForm.$invalid" class="btn btn-success" ng-click="saveBadCus()">保存</button> </div> </form> </div>
注意事项：$valid 和$invalid 相反 $invalid表示当前控件至少存在一个错误 有错误时为true $valid表示当前有错误时为false 无错误时为true
name 定义了表单的名称 ng-disabled="addForm.$invalid" 定义了按钮是否可点击 当表单不合法时 按钮置灰
$dirty 表示当前用户和控件交互过 交互过$dirty的值为真 和$pristine 相反
$error对象中保存着没有通过验证的验证器名称以及对应的错误信息
required 表示当前控件必须有值
2、serivce层保存数据写法
//保存客户 this.saveBadCustomer=function(companyName,dangerDate,informationSource,holdCompany,riskType,holdAmount) { var deferred = $q.defer(); var url = "api/blacklist/saveBadCustomerInformation" ; $http({ method:"post", url:url , data:{ company_name:companyName, danger_date:dangerDate, source:informationSource, holder:holdCompany, risk_type:riskType, amount: holdAmount 持仓金额 } }) .success(function(data) { deferred.resolve(data); }) .error(function(data, status, headers, config){ deferred.reject(data); }); return deferred.promise; };
注意事项：通过angularJs提供的服务 以对象的方式像后台请求接口保存数据 后台采用实体类的方式与前端对象值进行绑定 实体类的类型是什么 前端页面所传入的值就应该是什么 否则会报400错误 bad request 例如 如果后台是String 方式 那么前端可以是任意值 如果后台是Integer 前端应该是整数 如果是日期类型前端应该输入日期 否则会绑定错误 最应该注意的是如果前端传入的值是小数对精度要求较高的话 一定要用 BigDecimal 这个封装类.
3、自定义指令 判断一个公司是否存在
app.directive('ensureExist',function($http){ return { require:'ngModel', link:function(scope,ele,attrs,c){ scope.$watch(attrs.ngModel,function(n){ console.info(c); console.info(n); if(!n)return; $http({ method:'post', url:'api/blacklist/getCompanyNameIsTable?companyName='+ n, data:{ field:attrs.ensureExist, value:scope.ngModel } }).success(function(data) { console.info(data); c.$setValidity('exist',data); }).error(function(data){ console.info(data); c.$setValidity('exist',data); }); }); } };
注意事项 ：写指令不是目的 重要的是懂得其中的原理才能写出优雅的指令
4、angularJs的弹出框的基本 写法 在页面定义一个模板页面
<html></html>
<script type="text/ng-template" id="test.html"> <div> 您好, 该公司已经入库 ,不能重复入库 , 谢谢! </div> <div > <button class="btn" ng-click="cancel()">确认</button> </div> </script>
js 中指定改控制器
blacklistContrl .controller("IndentityModalInstanceCtrl",function($scope,$uibModalInstance){ $scope.cancel = function(){ $uibModalInstance.dismiss('cancel'); // 退出 }
具体执行方法
var modalInstance = $uibModal.open({ templateUrl : 'test.html', //指向上面创建的视图 controller : 'IndentityModalInstanceCtrl',// 初始化模态范围 size : 'lg', //大小配置 resolve:{ } }); modalInstance.result.then(function(){ },function(){ });
注意事项 ：当使用angularJS的弹出框时要引入$uibModal指令 同时要在模块中注入ui.bootstrap 同时也要引入ui-bootstrap-tpls.js
5、bootstrap 时间插件写法
页面写法
<input type="text" readonly max-date="maxDate" uib-datepicker-popup="yyyy-MM-dd" is-open="dateFopened" ng-model="badCus.dangerDate" ng-click="dangerDateFopen($event)" placeholder="请选择日期" />
js端写法
//日期选择结束日期限制 $scope.maxDate = new Date(); //时间选择 $scope.today = function() { $scope.dangerDate = new Date(); }; $scope.today(); $scope.dangerDateFopen = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.dateFopened = true; };
注意事项 :知道每个属性的具体含义 与js的写法才是最重要的
