• Ionic
  • IONIC 表单(FORM)验证

    rosheng 3周前 46次点击 来自 Ionic

    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 条回复
    calciferAI 1周前

    怎么获取积分啊

    关于 广告投放
    ©2016 - 2018 V4.1.6 Powered by 北京雏森科技有限公司