Home > Developer > Web Develop
In the Web application, the data validation is very important, a careless to produce a bug, and more bugs appear to have a personal development ability, this time if you can have a handy verification plug-in, development efficiency will be greatly improved. As if ox Demon King told Sun Wukong, you lack a weapon, so he grabbed the stick, with that called a cool. Three the first Jiao told Zhanshenyangjiian, you lack a weapon in hand, so he turned three jiao into a three-pointed two-edged gun, and then with a loyal and smell sensitive dog, do things to really do more with less. Today I also learn this more popular form verification plugin, to make a good weapon for themselves.
Plugin website: https://jqueryvalidation.org
Second, the choice of CNDBOOTCDN (http://www.bootcdn.cn) provides a more plug-in CDN, relatively stable, using a period of time feel more reliable, so choose to use it, of course, you can also download to local use.
Jquery:http://cdn.bootcss.com/jquery/1.8.1/jquery.js
Validate:http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js
The plugin must be introduced into jquery in order to be effective.
Third, simple example<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <!--To ensure proper drawing and touch-screen scaling, you need to add viewport metadata tags to - <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <Scriptsrc= "Http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></Script> <Scriptsrc= "Http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js"></Script> <Linkhref= "Http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css"rel= "stylesheet"></Head><Body> <Divclass= "Container"> <formID= "Commentform"> <Divclass= "Form-group"> <label for= "Exampleinputname">Name</label> <inputtype= "text"class= "Form-control"ID= "Exampleinputname"name= "Exampleinputname"style= "width:40%"Required> </Div> <Divclass= "Form-group"> <label for= "Exampleinputemail">Email</label> <inputtype= "Email"class= "Form-control"ID= "Exampleinputemail"name= "Exampleinputemail"style= "width:40%"Required> </Div> <Buttontype= "Submit"class= "Btn Btn-default">Send Invitation</Button> </form> </Div></Body><Script>$.validator.setdefaults ({submithandler:function() {alert ("submitted!"); } }); $ (). Ready (function() { //Validate the comment form when it is submitted $("#commentForm"). Validate (); });</Script></HTML>View Code
As long as the required attribute is specified for the HTML tag, only one sentence of $ ("#commentForm") is required in JS. Validate (); Can complete the verification, the efficiency really greatly improved.
Four, do not specify attributes on HTML111
Form Validation Plugin Jquery.validate.js learning
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
