<!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>