IONIC 表单(FORM)验证

最新推荐文章于 2022-06-15 17:01:19 发布

戴子

最新推荐文章于 2022-06-15 17:01:19 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/dailuwen/article/details/52625637

版权

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

此次验证不能为空

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