前端表单验证与后台交互的知识点总结
当我们像后台提交表单时，前端表单的验证是最重要的，因为我们前端要尽量保护后端，所以一切有必要的验证我们在前端做即可.
最近一直在做关于坏客户列表和黑名单内容管理系统 所以将平时写的一些基本代码显示如下
1、像后台插入数据时 前端表单验证如下
注意事项：$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的弹出框的基本 写法 在页面定义一个模板页面
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 时间插件写法
页面写法
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的写法才是最重要的