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
		}
	});
})

此次验证不能为空

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

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