angular form 验证 ngMessage

时间：2023-03-08 22:32:56
<!DOCTYPE HTML>

<html ng-app="deliciousApp">

<head>

    <meta charset="UTF-8">

</head>

<style type="text/css">

.form{padding: 35px 15px ;}

.form .p-input{color: #;font-size: 14px;border-bottom:1px solid #;padding: 18px  12px 5px;}

.form .p-input input[type=text]{color:#;}

.apply-error{color: #f05a5a;font-size: 12px;display: block;margin-top: 10px;}

.apply-btn{display:block;width: 245px;height: 40px;line-height: 40px;text-align: center;color: #ffffff;font-size: 15px;background: #;border-radius: 5px;margin-top:10px;}

/*input.ng-dirty.ng-invalid {

    border-color: #e9322d;

    -webkit-box-shadow: 0 0 6px #f8b9b7;

    -moz-box-shadow: 0 0 6px #f8b9b7;

    box-shadow: 0 0 6px #f8b9b7;

}*/

</style>

<body ng-controller="formCtr">

 <form name="applyForm" novalidate>

     <p class="p-input">

       <label>姓名</label>

       <input type="text"  placeholder="请输入姓名" name="delicacyName" ng-model="name" ng-minlength="" ng-maxlength="" required />

     </p>

     <p class="p-input">

       <label>手机号</label>

       <input type="text"  placeholder="请输入手机号" name="mobilePhone" ng-model="mobile" ng-pattern="/^1[3|4|5|7|8][0-9]\d{8}$/" required  />

     </p>

    <div ng-messages="applyForm.delicacyName.$error" ng-show="applyForm.delicacyName.$touched || applyForm.$submitted ">

        <div ng-message="required" class="apply-error">姓名不能为空</div>

        <div ng-message="minlength" class="apply-error">姓名不少于2字符</div>

        <div ng-message="maxlength" class="apply-error">姓名不大于6字符</div>

    </div>

    <div ng-messages="applyForm.mobilePhone.$error" ng-show="applyForm.mobilePhone.$touched || applyForm.$submitted ">

        <div ng-message="required" class="apply-error">手机号不能为空</div>

        <div ng-message="pattern" class="apply-error">手机号格式不正确</div>

    </div>

    <select ng-model="selected" ng-options="x.id as x.name for x in citys" ng-change="change()"></select>

    <div ng-show="cityError" class="apply-error">您还没有选择城市</div> <br/>

    <label>

      <input type="radio" ng-model="sex" value="boy" ng-change="changeSex()">

      男

    </label>

    <label>

      <input type="radio" ng-model="sex" value="girl" ng-change="changeSex()">

      女

      <div ng-show="sexChecked" class="apply-error">您没有选择性别</div><br/>

    <input type="checkbox" ng-checked="checked" ng-model="checked"> <label>同意协议</label>

    <div ng-show="!checked" class="apply-error">您还未选中协议</div>

    <a href="javascript:void(0)" class="apply-btn" ng-click="submitApply(applyForm)">申请</a>

  </form>

  <script type="text/javascript" src="angular.min.1.3.16.js"></script>

  <script type="text/javascript" src="angular-messages.min.js"></script>

  <script type="text/javascript">

   var deliciousApp = angular.module('deliciousApp', ['ngMessages']);

   deliciousApp.controller("formCtr",["$scope","$http",function($scope,$http){

      $scope.checked=true;

      $scope.citys = [

                        {name:'请选择',id:'-1'},

                        {name:'北京',id:''},

                        {name:'上海',id:''},

                        {name:'广州',id:''}

                    ];

      $scope.selected="-1";

      $scope.changeSex=function(){

        if($scope.sex){

          $scope.sexChecked=false;

        }

      }

      $scope.change=function(){

        $scope.selected==-?$scope.cityError=true:$scope.cityError=false;

      }

      $scope.submitApply=function(applyForm){

        applyForm.$submitted=true;

        if($scope.selected==-){

           $scope.cityError=true;

        }else{

          $scope.cityError=false;

        }

        if(!$scope.sex){

          $scope.sexChecked=true;

        }

        console.log(applyForm);

        // if(applyForm.$valid){

        //       var url=web_sapi_domain+'shopping/MainServlet?req_fmt_type=jsonp&method=addDelicacyUser&req_str='+

        //           '{"scope":"11102","buyerEmail":"'+$scope.buyeremail+'","delicacyName":"'+$scope.name+'","mobilePhone":"'+$scope.mobile+'","applyCode":"'+$scope.inviteCode+'"}&callback=JSON_CALLBACK';

        //        $http.jsonp(url)

        //         .success(function(response){

        //           response=angular.fromJson(response);

        //           if(response.Result.Header.resultID==0){

        //                alert("申请成功，我们会尽快为您审核！");

        //                //$location.path("/");

        //           }else{

        //              alert(response.Result.Header.resultMessage);

        //           }

        //         });

        //   }

        }

   }]);

  </script>

</body>

</html>

相关文章