<!DOCTYPE HTML> <html ng-app="deliciousApp"> <head> <meta charset="UTF-8"> </head> <style type="text/css"> .form{padding: 35px 15px 0;} .form .p-input{color: #595959;font-size: 14px;border-bottom:1px solid #000000;padding: 18px 0 12px 5px;} .form .p-input input[type=text]{color:#595959;} .apply-error{color: #f05a5a;font-size: 12px;display: block;margin-top: 10px;} .apply-btn{display:block; 245px;height: 40px;line-height: 40px;text-align: center;color: #ffffff;font-size: 15px;background: #000000;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="2" ng-maxlength="6" 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:'1'}, {name:'上海',id:'2'}, {name:'广州',id:'3'} ]; $scope.selected="-1"; $scope.changeSex=function(){ if($scope.sex){ $scope.sexChecked=false; } } $scope.change=function(){ $scope.selected==-1?$scope.cityError=true:$scope.cityError=false; } $scope.submitApply=function(applyForm){ applyForm.$submitted=true; if($scope.selected==-1){ $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>