使用JavaScript进行即时验证-不知道从哪里开始

Question

 //PENDING

 body { font-family: "Raleway", sans-serif; font-size: 14pt; /* 1em */ color: white; text-align: center; background-image: url(./img/bg); } #cog { margin-top: 5%; margin-bottom: -5%; } section.hero { padding: none; margin-left: 10%; margin-right: 10%; } section.hero h1.heroText { font-size: 3em; font-weight: 100; } section.hero h1.subText { font-size: 1.5em; font-weight: 100; } div.footer { font-size: 1.75em; font-weight: 100; position: absolute; bottom: 5px; width: 100%; text-align: center; } input.nicerInput { height: 50px; width: 25%; outline: none; background-color: white; color: #aaa; font-size: 1em; text-align: center; font-family: "Raleway", sans-serif; font-weight: 100; display: inline-block; } input.submitButton { color: white; font-family: "Raleway", sans-serif; font-weight: 100; font-size: 1em; height: 56px; width: 150px; background-color: #5CCF58; text-decoration: none; text-align: center; outline: none; border: none; display: inline-block; position: relative; left: -6px; top: -1px; -webkit-transition: linear all 1s; -moz-transition: linear all 1s; -mos-transition: linear all 1s; } input.submitButton:hover { color: inherit; background-color: #28CD20; -webkit-transition: linear all 0.5s; -moz-transition: linear all 0.5s; -mos-transition: linear all 0.5s; } input.submitButton:active { color: inherit; background-color: #21B71C; -webkit-transition: linear all 0.1s; -moz-transition: linear all 0.1s; -mos-transition: linear all 0.1s; } .errorMsg { color: white; font-size: 1em; margin-left: 10%; margin-right: 10%; display: none; } .fa-spin-custom { -webkit-animation: spin 7500ms infinite linear; animation: spin 7500ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-7x { font-size: 7.5em !important; }

 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width"> <meta name="author" content="Olly John"> <meta name="keywords" content="Stephen John Eyecare, Stephen John Opticians, Worcester, Opticians, Opticions"> <link rel="stylesheet" type="text/css" href="./css/normalize.css"> <link rel="stylesheet" type="text/css" href="./css/styles.css"> <link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <title>Stephen John Eyecare - Coming Soon</title> </head> <body> <i class="fa fa-7x fa-cog fa-spin-custom" id="cog"></i> <section class="hero"> <h1 class="heroText">We'll be coming <strong>really soon!</strong></h1> <h1 class="subText">If you'd like to be notified when we go live, please submit your e-mail address using the field below</h1> </section> <section class="field"> <form action="" name="form" method="post"> <div class="form"> <input type="text" class="nicerInput" name="input" id="input" placeholder="you@youremail.com"> <input type="submit" class="submitButton" disabled="true" value="submit" id="sub"> <br> <br> <span class="errorMsg" id="empty">Please make sure to enter your e-mail address before submitting it to us. <br></span> <span class="errorMsg" id="format">The e-mail address you entered is invalid. Please enter an e-mail address in the format johndoe@email.com</span> </div> </form> </section> <div class="footer">Stephen John Eyecare</div> <script src="bower_components/jquery/src/jquery.js"></script> <!-- Use jQuery to validate?--> </body> </html>

Hi folks, 嗨伙计，

I've been asked by my father to make a landing page for his website that he's having made and he just wants something to put on the host so it's not being wasted as he's already bought the space and domain but there's been a setback with the development of the site so he's just asked me to quickly make something that says the main site's coming soon and gives people the ability to sign up to be notified when it goes live. 父亲问我要为他制作的网站制作一个登陆页面，他只想在主机上放一些东西，这样就不会浪费他，因为他已经购买了空间和域名，但是网站的开发，所以他只是要我快速做出一些事情，说主要网站即将推出，并且使人们能够注册并在网站上线时得到通知。
I've done all the front end stuff and I've started looking at the validation side of things for the 'form' and I can't make heads or tails of it so I was hoping someone could offer some insight as to what I need to do for it if you'd be so kind. 我已经完成了所有前端工作，并且已经开始关注“表单”的验证方面，因此我无法做出正面或反面的建议，因此我希望有人可以对我的内容提供一些见解。如果您这么仁慈，就需要这样做。
The code for the page thus far is in the snippet. 到目前为止，该页面的代码已在代码段中。

Thanks in advance 提前致谢

Answer 1

Use the below code it will work validation.. Don't forgot to put main jquery and validate min files 使用下面的代码，它将可以验证。. 不要忘了放主jquery并验证最小文件

 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width"> <meta name="author" content="Olly John"> <meta name="keywords" content="Stephen John Eyecare, Stephen John Opticians, Worcester, Opticians, Opticions"> <link rel="stylesheet" type="text/css" href="./css/normalize.css"> <link rel="stylesheet" type="text/css" href="./css/styles.css"> <link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <title>Stephen John Eyecare - Coming Soon</title> <style> body { font-family: "Raleway", sans-serif; font-size: 14pt; /* 1em */ color: #000; text-align: center; background-image: url(./img/bg); } #cog { margin-top: 5%; margin-bottom: -5%; } section.hero { padding: none; margin-left: 10%; margin-right: 10%; } section.hero h1.heroText { font-size: 3em; font-weight: 100; } section.hero h1.subText { font-size: 1.5em; font-weight: 100; } div.footer { font-size: 1.75em; font-weight: 100; position: absolute; bottom: 5px; width: 100%; text-align: center; } input.nicerInput { height: 50px; width: 25%; outline: none; background-color: white; color: #aaa; font-size: 1em; text-align: center; font-family: "Raleway", sans-serif; font-weight: 100; display: inline-block; } input.submitButton { color: white; font-family: "Raleway", sans-serif; font-weight: 100; font-size: 1em; height: 56px; width: 150px; background-color: #5CCF58; text-decoration: none; text-align: center; outline: none; border: none; display: inline-block; position: relative; left: -6px; top: -1px; -webkit-transition: linear all 1s; -moz-transition: linear all 1s; -mos-transition: linear all 1s; } input.submitButton:hover { color: inherit; background-color: #28CD20; -webkit-transition: linear all 0.5s; -moz-transition: linear all 0.5s; -mos-transition: linear all 0.5s; } input.submitButton:active { color: inherit; background-color: #21B71C; -webkit-transition: linear all 0.1s; -moz-transition: linear all 0.1s; -mos-transition: linear all 0.1s; } .errorMsg { color: white; font-size: 1em; margin-left: 10%; margin-right: 10%; display: none; } .fa-spin-custom { -webkit-animation: spin 7500ms infinite linear; animation: spin 7500ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-7x { font-size: 7.5em !important; } label .error{color:red;} </style> </head> <body> <i class="fa fa-7x fa-cog fa-spin-custom" id="cog"></i> <section class="hero"> <h1 class="heroText">We'll be coming <strong>really soon!</strong></h1> <h1 class="subText">If you'd like to be notified when we go live, please submit your e-mail address using the field below</h1> </section> <section class="field"> <form action="" name="form" id="sample_frm" method="post"> <div class="form"> <input type="text" class="nicerInput" name="user_email" id="input" placeholder="you@youremail.com"> <input type="submit" class="submitButton" value="submit" id="sub"> </div> </form> </section> <div class="footer">Stephen John Eyecare</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> <script> $( "#sample_frm" ).validate({ rules: { user_email: { required: true, email: true } }, messages: { user_email:{ required:"Enter email id", //custom error message email: "valid email id" } } }); </script> <!-- Use jQuery to validate?--> </body> </html>

使用JavaScript进行即时验证-不知道从哪里开始

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-03-22 16:52:37

使用JavaScript进行即时验证-不知道从哪里开始

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-03-22 16:52:37

解决方案1
2 已采纳 2015-03-22 16:52:37