IONIC 表单(FORM)验证

1、创建IONIC 项目 不懂可以点这里
创建项目

2、我们以修改密码为列

<ion-view title="修改密码">
<ion-nav-bar>
<ion-header-bar class="nav-title-slide-ios7 bar-light" align-title="center">
<ion-nav-buttons side="left">
<a class="button button-icon icon ion-ios-undo-outline" style="font-size: 30px;" ng-click="backBtn();"></a>
</ion-nav-buttons>
</ion-header-bar>
</ion-nav-bar>
<ion-content>
<form name="dataForm" novalidate="novalidate" ng-submit="save(dataForm);">
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">原密码</span>
<input type="password" ng-model="data.password" required placeholder="请输入原密码">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">新密码</span>
<input type="password" ng-model="data.newPassword" required placeholder="密码为英文和数字组成">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">确认密码</span>
<input type="password" ng-model="data.confirmPassword" required placeholder="请确认登录密码">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-disabled="dataForm.$invalid">确认修改</button>
</label>
</div>
</form>
</ion-content>
</ion-view>

我们只需 在外面 嵌套一个 form 如果 controller 需要 额外验证或者其他 你可以给他 命个名 name,如果不需不起也行

Controller

//========================修改密码===========================
.controller('UpdatePwdCtrl', function($scope, $state, $ionicHistory, LoginService, popupUtil) {
$scope.data = {};
$scope.backBtn = function(){
$ionicHistory.goBack();
};
$scope.save = function(dataForm){
if(dataForm.$valid){//成功为 true 否则为 false
$scope.changPassword();
}
}

$scope.changPassword = function (){

if($scope.data.confirmPassword == $scope.data.newPassword){
delete $scope.data.confirmPassword;
LoginService.changepassword($scope.data)
.$promise.then(function(resp){
if(resp.success){//修改成功
popupUtil.showAlert('提示','密码修改成功');

$state.go('login');//跳转登录页面

}else{
popupUtil.showAlert('提示','密码修改失败');
}
}, function(err){

});
}else{
popupUtil.showAlert('提示','两次密码输入不正确');
}
};

})

Service 定义 popupUtil

//============消息弹框============
.provider('popupUtil', function(){
this.$get = function($ionicPopup){
var popupUtil = {};
popupUtil.showConfirm = function(titleTxt, contentTxt){
var confirmPopup = $ionicPopup.confirm({
title: titleTxt,
template: contentTxt
});
return confirmPopup;
};
popupUtil.showAlert = function(titleTxt, contentTxt) {
var alert = $ionicPopup.alert({
title: titleTxt,
template: contentTxt
});
return alert;
};
return popupUtil;
}
})

Service 定义 后台请求

.factory('LoginService', function($resource){
return $resource('', {}, {
'login' : {//登录
url : 'sec/login',
method : 'POST',
isArray : false
},
'logout' : {//退出
url : 'sec/logout',
method : 'GET',
isArray : false
},
'changepassword' : {//修改密码
url : 'sec/changepassword',
method : 'POST',
isArray : false
}
});
})

此次验证不能为空

如果有空值则界面应该是这样



如果 都不为空界面应该是这样