Home > Developer > Web Develop
Just learn form validation. It must be said that the form verification is more abundant. Here's a small example.
1. Scenario: Watch a movie and choose a seat!
2, specific requirements: when entering the seat number, to verify. 1 of them have been selected. If the input is 1, the Submit button is set to invalid, and a hint is given, and if the input is 2, no prompt is given, allowing the commit
3, the actual effect:
4. code example:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "App">3 <Head>4 <MetaCharSet= "Utf-8"/>5 <Scriptsrc= "Jquery-1.10.2.min.js"></Script>6 <Scriptsrc= "Angular.js"></Script>7 <styletype= "Text/css">8 Input.ng-invalid.ng-dirty{9 Background-color:Yellow;Ten } One </style> A </Head> - <BodyNg-controller= "Controller"> - <H1>Correctness check</H1> the <formname= "MyForm"novalidate> - Please enter the order of your chosen movie seats - <inputtype= "text"Ng-model= "seq"name= "seq"Ng-keyup= "isdup (seq);"/> - <spanNg-show= "myform.seq. $error. Seq">The seats are already seated!</span> + <Buttonng-disabled= "MyForm. $invalid"ID= "BTN">Submit</Button> - </form> + A <Script> at Angular.module ('app', []). Controller ("Controller",function($scope) { - $scope. Flag= false; - $scope. Seq=1;//The initial value is 1, and 1 is already selected. - $scope. Isdup=function(seq) { - if(Seq== 1) - { in //var Btn=document.getelementbyid (' btn '); - //btn.setattribute (' disabled ', ' disabled '); to $scope. Myform.seq. $setValidity ("seq", false) + //$scope. seq=2; - } the Else{ * //var Btn=document.getelementbyid (' btn '); $ //btn.removeattribute (' disabled ', ' disabled ');Panax Notoginseng $scope. Myform.seq. $setValidity ("seq", true); - //$scope. seq=1; the } + } A }); the + </Script> - </Body> $ </HTML>
Angularjs Add form validation: Custom validation
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
