jquery-validation is a front-end verification js plugin, you can verify that the required fields, email, URL, numeric range, etc., in the form is widely used.
Download jquery-validation-1.19.0.zip steps:
(1) enter the official website https://jqueryvalidation.org/
(2) sliding down, find Download
(3) sliding down, find jquery-validation-1.19.0.zip , you can download
Source website https://github.com/jquery-validation/jquery-validation
The first step: jquery.js and js style:
1 <script src="js/jquery.validate.min.js"></script> 2 <script src="js/messages_zh.min.js"></script>
Step two: add properties required in the form
1 <form class="cmxform" id="commentForm" method="get" action=""> 2 <fieldset> 3 <legend>Please provide your name, email address (won't be published) 4 and a comment</legend> 5 <p> 6 <label for="cname">Name (required, at least 2 characters)</label> 7 <input id="cname" name="name" minlength="2" type="text" required> 8 </p> 9 <p> 10 <label for="cemail">E-Mail (required)</label> 11 <input id="cemail" type="email" name="email" required> 12 </p> 13 <p> 14 <label for="curl">URL (optional)</label> 15 <input id="curl" type="url" name="url"> 16 </p> 17 <p> 18 <label for="ccomment">Your comment (required)</label> 19 <textarea id="ccomment" name="comment" required></textarea> 20 </p> 21 <p> 22 <input class="submit" type="submit" value="Submit"> 23 </p> 24 </fieldset> 25 </form>
Add properties required in the form component to indicate this component is a required field.
The third step is to verify the effect.
. 1 $ () READY (. Function () { 2 // ID value commentForm and forms to be consistent . 3 $ ( "# commentForm" ) .validate (); . 4 });
Complete code:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <title>平滑滚动</title> 8 9 <link rel="stylesheet" href="css/common.min.css"> 10 <link rel="stylesheet" href="css/okayNav.min.css"> 11 <!--动画样式--> 12 <link rel="stylesheet" href="css/animate.css"> 13 14 </head> 15 <body> 16 17 <header id="header" class="okayNav-header"> 18 <a class="okayNav-header__logo" href="#"> 19 Logo 20 </a> 21 22 <nav role="navigation" id="nav-main" class="okayNav"> 23 <ul> 24 <li><a href="#">首页</a></li> 25 <li><a href="#shop">购物</a></li> 26 <li><</blog>= "# Blog"the hrefAa></li> 27 <li><a href="#service">服务</a></li> 28 <li><a href="#connect">联系我们</a></li> 29 <li><a href="#about">关于我们</a></li> 30 <li><a href="javascript:void(0)" onclick="gotoTest()">测试</a></li> 31 </ul> 32 </nav> 33 </header><!-- /header --> 34 35 <main> 36 <h1>Resize your browser to preview okayNav</h1> 37 </main> 38 39 40 <section id="shop" style= "min-height: 700px; background-Color: # FFE696" > 41 is ! <- Delay Delay 2S-Speed - 42 is like only need to change the other style = class "Animated Infinite zoomInDown Delay-2S 43 is inside zoomInDown Alternatively to " -> 44 is < h1 of class =" Animated Infinite zoomInDown Delay-2S " > Shop </ h1 of > 45 46 is </ sectionTop > 47 48 49 < sectionTop ID =" Blog " style =" min-height: 700px ; background-Color: #AOAFEB " > 50 <h1 > blog</h1> 51 52 </section> 53 54 55 <section id="service" style="min-height:700px;background-color:#EB90FF"> 56 <h1>service</h1> 57 <form class="cmxform" id="commentForm" method="get" action=""> 58 <fieldset> 59 <legend>Legend</Form> 60 <p> 61 <label for="cname">姓名*</label> 62 <input id="cname" name="name" minlength="2" type="text" required> 63 </p> 64 <p> 65 <label for="cemail">邮件*</label> 66 <input id="cemail" type="email" name="email" required> 67 </p> 68 <p> 69 <label for="curl">URL (optional)</label> 70 <input id="curl" type="url" name="url"> 71 </p> 72 <p> 73 <label for="ccomment">Your comment (required)</label> 74 <textarea id="ccomment" name="comment" required></textarea> 75 </p> 76 <p> 77 <input class="submit" type="submit" value="Submit"> 78 </p> 79 </fieldset> 80 </form> 81 82 </section> 83 84 <section id="connect" style="min-height:700px;background-color:#25fb65"> 85 <h1>connect</h1> 86 87 </section> 88 89 <section id="about" style="min-height:700px;background-color:#66fb65"> 90 <h1>about</h1> 91 92 </section> 93 94 <section id="test" style= "min-height: 700px; background-Color: # e34565" > 95 < h1 of > Test </ h1 of > 96 97 </ sectionTop > 98 99 < footer > 100 ! <- & Copy; @ is the escape character, site https://dev.w3.org/html5/html-author/charref 101 2014- <Script> document.write ((new new a Date ()) </ Script> time, the year 2014 is fixed, 102 <Script> document.write ((new Date ()) </ script> now get the year 103 a Date knowledge website: HTTPS: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date -> 104 <p style="text-align:center;">Copyright © 2014-<script>document.write((new Date())</script> </p> 105 </footer> 106 107 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 108 <script src="js/jquery.okayNav-min.js"></script> 109 <script src="js/smoothscroll.js"></script> 110 111 <script src="js/jquery.validate.min.js"></script> 112 <script src="js/messages_zh.min.js"></script> 113 114 115 116 <script type="text/javascript"> 117 var navigation = $('#nav-main').okayNav(); 118 119 function gotoTest(){ 120 document.querySelector('#test').scrollIntoView({ behavior: 'smooth' }); 121 } 122 $().ready(function() { 123 $("#commentForm").validate(); 124 }); 125 </script> 126 </body> 127 </html>
operation result:
