IONIC 表单(FORM)验证

来源：互联网发布：as3.0 外部js接口编辑：程序博客网时间：2024/05/17 07:49

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

此次验证不能为空

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

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

1 0