<! DOCTYPE html>"Deliciousapp">"UTF-8"> "Text/css">. form{padding:35px 15px0;}. form. P-input{color: #595959; font-size:14px;border-bottom:1px Solid #000000;p adding:18px012px 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;width: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> <pclass="P-input"> <label> name </label> <input type="text"Placeholder="Please enter your name"Name="Delicacyname"Ng-model="name"Ng-minlength="2"Ng-maxlength="6"Required/> </p> <pclass="P-input"> <label> phone number </label> <input type="text"Placeholder="Please enter your phone number"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"> name cannot be empty </div> <div ng-message="minlength" class="Apply-error"> name not less than 2 characters </div> <div ng-message="maxlength" class="Apply-error"> name not greater than 6 characters </div> </div> <div ng-messages="Applyform.mobilephone. $error"ng-show="applyform.mobilephone. $touched | | applyform. $submitted"> <div ng-message="Required" class="Apply-error"> Phone number cannot be empty </div> <div ng-message="pattern" class="Apply-error"> Phone number format is incorrect </div> </div> <SelectNg-model="selected"ng-options="X.id as X.name for x in Citys"Ng-change="Change ()"></Select> <div ng-show="Cityerror" class="Apply-error"> You have not selected city </div> <br/> <label> <input type="Radio"Ng-model="Sex"Value=" Boy"Ng-change="Changesex ()">male</label> <label> <input type="Radio"Ng-model="Sex"Value="Girl"Ng-change="Changesex ()">female<div ng-show="sexchecked" class="Apply-error"> You have not chosen gender </div><br/> <input type="checkbox"ng-checked="checked"Ng-model="checked"> <label> Consent Agreement </label> <div ng-show="!checked" class="Apply-error"> You have not selected the Agreement </div> <a href="javascript:void (0)" class="apply-btn"ng-click="submitapply (applyform)"> Applications </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">varDeliciousapp = Angular.module ('Deliciousapp', ['ngmessages']); Deliciousapp.controller ("formctr",["$scope","$http", function ($scope, $http) {$scope.checked=true; $scope. Citys=[{name:'Please select'Id:'-1'}, {name:'Beijing'Id:'1'}, {name:'Shanghai'Id:'2'}, {name:'Guangzhou'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 ("The application is successful, we will review for you as soon as possible!" "); // //$location. Path ("/"); //}else{//Alert (response. Result.Header.resultMessage); // } // }); // } } }]); </script></body>Angular form Validation Ngmessage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
