function validate()
{
var email=document.getElementById("email").value;
var pass=document.getElementById("pass").value;
if(pass==" " || email==" ")
{
alert("Please fill all the requred field");}
else if(pass.length <3)
{alert("password is too short");}
else{alert(email);
alert(pass);
alert("form submission successful");}
}
/*PROBLEM IS IN THE BELOW CODE */
/* VALIDATE2 FUNCTION IS UNABLE TO PULL UP ANY FORM INPUTS */
function validate2()
{
var R_name=document.getElementById("R_name").value;
var R_email=document.getElementById("R_email").value;
var R_number=document.getElementById("R_number").value;
var R_pass=document.getElementById("R_pass").value;
if(R_name =="" ||R_email==""||R_number==""||R_pass=="")
{alert("please fill the form");}
else{
alert(R_name);
alert(R_email);
alert(R_number);
alert(R_pass);
alert("registered successfully");
}}body{font-family: 'Ropa Sans', sans-serif; color:#666; font-size:14px; color:#333}
li,ul,body,input{margin:0; padding:0; list-style:none}
#login-form{width:350px; background:#FFF; margin:0 auto; margin-top:70px; background:#f8f8f8; overflow:hidden; border-radius:7px}
.form-header{display:table; clear:both}
.form-header label{display:block; cursor:pointer; z-index:999}
.form-header li{margin:0; line-height:60px; width:175px; text-align:center; background:#eee; font-size:18px; float:left; transition:all 600ms ease}
/*sectiop*/
.section-out{width:700px; float:left; transition:all 600ms ease}
.section-out:after{content:''; clear:both; display:table}
.section-out section{width:350px; float:left}
.login{padding:20px}
.ul-list{clear:both; display:table; width:100%}
.ul-list:after{content:''; clear:both; display:table}
.ul-list li{ margin:0 auto; margin-bottom:12px}
.input{background:#fff; transition:all 800ms; width:247px; border-radius:3px 0 0 3px; font-family: 'Ropa Sans', sans-serif; border:solid 1px #ccc; border-right:none; outline:none; color:#999; height:40px; line-height:40px; display:inline-block; padding-left:10px; font-size:16px}
.input,.login span.icon{vertical-align:top}
.login span.icon{width:50px; transition:all 800ms; text-align:center; color:#999; height:40px; border-radius:0 3px 3px 0; background:#e8e8e8; height:40px; line-height:40px; display:inline-block; border:solid 1px #ccc; border-left:none; font-size:16px}
.input:focus:invalid{border-color:red}
.input:focus:invalid+.icon{border-color:red}
.input:focus:valid{border-color:green}
.input:focus:valid+.icon{border-color:green}
#check,#check1{top:1px; position:relative}
.btn{border:none; outline:none; background:#0099CC; border-bottom:solid 4px #006699; font-family: 'Ropa Sans', sans-serif; margin:0 auto; display:block; height:40px; width:100%; padding:0 10px; border-radius:3px; font-size:16px; color:#FFF}
.social-login{padding:15px 20px; background:#f1f1f1; border-top:solid 2px #e8e8e8; text-align:right}
.social-login a{display:inline-block; height:35px; text-align:center; line-height:35px; width:35px; margin:0 3px; text-decoration:none; color:#FFFFFF}
.form a i.fa{line-height:35px}
.fb{background:#305891} .tw{background:#2ca8d2} .gp{background:#ce4d39} .in{background:#006699}
.remember{width:50%; display:inline-block; clear:both; font-size:14px}
.remember:nth-child(2){text-align:right}
.remember a{text-decoration:none; color:#666}
.hide{display:none}
/*swich form*/
#signup:checked~.section-out{margin-left:-350px}
#login:checked~.section-out{margin-left:0px}
#login:checked~div .form-header li:nth-child(1),#signup:checked~div .form-header li:nth-child(2){background:#e8e8e8}<body>
<div id="login-form">
<input type="radio" checked id="login" name="switch" class="hide">
<input type="radio" id="signup" name="switch" class="hide">
<div>
<ul class="form-header">
<li><label for="login"><i class="fa fa-lock"></i> LOGIN<label for="login"/></label></li>
<li><label for="signup"><i class="fa fa-credit-card"></i> REGISTER</label></li>
</ul>
</div>
<div class="section-out">
<section class="login-section">
<div class="login">
<form action="">
<ul class="ul-list">
<li><input type="email" required class="input" placeholder="Your Email" id="email"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="pass"/><span class="icon"><i class="fa fa-lock"></i></span></li>
<li><span class="remember"><input type="checkbox" id="check"> <label for="check">Remember Me</label></span><span class="remember"><a href="">Forget Password</a></span></li>
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate()"></li>
</ul>
</form>
</div>
<div class="social-login">Or sign in with
<a href="" class="fb"><i class="fa fa-facebook"></i></a>
<a href="" class="tw"><i class="fa fa-twitter"></i></a>
<a href="" class="gp"><i class="fa fa-google-plus"></i></a>
<a href="" class="in"><i class="fa fa-linkedin"></i></a>
</div>
</section>
<section class="signup-section">
<div class="login">
<form action="">
<ul class="ul-list">
<li><input type="name" required class="input" placeholder="Your Name" id="R_name"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="number" required class="input" placeholder="Your Number" id="R_number"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="email" required class="input" placeholder="Your Email" id=R_email/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="R_pass"/><span class="icon"><i class="fa fa-lock"></i></span></li>
<li><input type="checkbox" id="check1"> <label for="check1">I accept terms and conditions</label></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
</ul>
</form>
</div>
<div class="social-login">Or sign up with
<a href="" class="fb"><i class="fa fa-facebook"></i></a>
<a href="" class="tw"><i class="fa fa-twitter"></i></a>
<a href="" class="gp"><i class="fa fa-google-plus"></i></a>
<a href="" class="in"><i class="fa fa-linkedin"></i></a>
</div>
</section>
</div>
</div>
</body>
请告诉我如何获取注册表单的用户输入并使用javascript对其进行验证。
请注意，validation 1功能可以从登录部分提取用户表单输入，但不能从注册部分提取用户表单输入。
我设计表单的方式是使用单选按钮在div容器内可切换部分。
如果用户单击注册单选按钮，则默认情况下将显示登录部分表单，然后div容器的注册部分表单将切换（变为可见），并且表单的登录部分将隐藏。
答案 0 :(得分：-1)
我刚刚检查了您的代码。您的JS代码没有错误！您刚刚在表单html代码上犯了一个小错误。您忘记为“ R_email”的属性值加上双引号。而已。我刚刚为您更正了代码，就在这里。
function validate()
{
var email=document.getElementById("email").value;
var pass=document.getElementById("pass").value;
if(pass==" " || email==" ")
{
alert("Please fill all the requred field");}
else if(pass.length <3)
{alert("password is too short");}
else{alert(email);
alert(pass);
alert("form submission successful");}
}
/*PROBLEM IS IN THE BELOW CODE */
/* VALIDATE2 FUNCTION IS UNABLE TO PULL UP ANY FORM INPUTS */
function validate2()
{
var R_name=document.getElementById("R_name").value;
var R_email=document.getElementById("R_email").value;
var R_number=document.getElementById("R_number").value;
var R_pass=document.getElementById("R_pass").value;
if(R_name =="" ||R_email==""||R_number==""||R_pass=="")
{alert("please fill the form");}
else{
alert(R_name);
alert(R_email);
alert(R_number);
alert(R_pass);
alert("registered successfully");
}}body{font-family: 'Ropa Sans', sans-serif; color:#666; font-size:14px; color:#333}
li,ul,body,input{margin:0; padding:0; list-style:none}
#login-form{width:350px; background:#FFF; margin:0 auto; margin-top:70px; background:#f8f8f8; overflow:hidden; border-radius:7px}
.form-header{display:table; clear:both}
.form-header label{display:block; cursor:pointer; z-index:999}
.form-header li{margin:0; line-height:60px; width:175px; text-align:center; background:#eee; font-size:18px; float:left; transition:all 600ms ease}
/*sectiop*/
.section-out{width:700px; float:left; transition:all 600ms ease}
.section-out:after{content:''; clear:both; display:table}
.section-out section{width:350px; float:left}
.login{padding:20px}
.ul-list{clear:both; display:table; width:100%}
.ul-list:after{content:''; clear:both; display:table}
.ul-list li{ margin:0 auto; margin-bottom:12px}
.input{background:#fff; transition:all 800ms; width:247px; border-radius:3px 0 0 3px; font-family: 'Ropa Sans', sans-serif; border:solid 1px #ccc; border-right:none; outline:none; color:#999; height:40px; line-height:40px; display:inline-block; padding-left:10px; font-size:16px}
.input,.login span.icon{vertical-align:top}
.login span.icon{width:50px; transition:all 800ms; text-align:center; color:#999; height:40px; border-radius:0 3px 3px 0; background:#e8e8e8; height:40px; line-height:40px; display:inline-block; border:solid 1px #ccc; border-left:none; font-size:16px}
.input:focus:invalid{border-color:red}
.input:focus:invalid+.icon{border-color:red}
.input:focus:valid{border-color:green}
.input:focus:valid+.icon{border-color:green}
#check,#check1{top:1px; position:relative}
.btn{border:none; outline:none; background:#0099CC; border-bottom:solid 4px #006699; font-family: 'Ropa Sans', sans-serif; margin:0 auto; display:block; height:40px; width:100%; padding:0 10px; border-radius:3px; font-size:16px; color:#FFF}
.social-login{padding:15px 20px; background:#f1f1f1; border-top:solid 2px #e8e8e8; text-align:right}
.social-login a{display:inline-block; height:35px; text-align:center; line-height:35px; width:35px; margin:0 3px; text-decoration:none; color:#FFFFFF}
.form a i.fa{line-height:35px}
.fb{background:#305891} .tw{background:#2ca8d2} .gp{background:#ce4d39} .in{background:#006699}
.remember{width:50%; display:inline-block; clear:both; font-size:14px}
.remember:nth-child(2){text-align:right}
.remember a{text-decoration:none; color:#666}
.hide{display:none}
/*swich form*/
#signup:checked~.section-out{margin-left:-350px}
#login:checked~.section-out{margin-left:0px}
#login:checked~div .form-header li:nth-child(1),#signup:checked~div .form-header li:nth-child(2){background:#e8e8e8}<body>
<div id="login-form">
<input type="radio" checked id="login" name="switch" class="hide">
<input type="radio" id="signup" name="switch" class="hide">
<div>
<ul class="form-header">
<li><label for="login"><i class="fa fa-lock"></i> LOGIN<label for="login"/></label></li>
<li><label for="signup"><i class="fa fa-credit-card"></i> REGISTER</label></li>
</ul>
</div>
<div class="section-out">
<section class="login-section">
<div class="login">
<form action="">
<ul class="ul-list">
<li><input type="email" required class="input" placeholder="Your Email" id="email"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="pass"/><span class="icon"><i class="fa fa-lock"></i></span></li>
<li><span class="remember"><input type="checkbox" id="check"> <label for="check">Remember Me</label></span><span class="remember"><a href="">Forget Password</a></span></li>
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate()"></li>
</ul>
</form>
</div>
<div class="social-login">Or sign in with
<a href="" class="fb"><i class="fa fa-facebook"></i></a>
<a href="" class="tw"><i class="fa fa-twitter"></i></a>
<a href="" class="gp"><i class="fa fa-google-plus"></i></a>
<a href="" class="in"><i class="fa fa-linkedin"></i></a>
</div>
</section>
<section class="signup-section">
<div class="login">
<form action="">
<ul class="ul-list">
<li><input type="name" required class="input" placeholder="Your Name" id="R_name"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="number" required class="input" placeholder="Your Number" id="R_number"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="email" required class="input" placeholder="Your Email" id="R_email"/><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="R_pass"/><span class="icon"><i class="fa fa-lock"></i></span></li>
<li><input type="checkbox" id="check1"> <label for="check1">I accept terms and conditions</label></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
</ul>
</form>
</div>
<div class="social-login">Or sign up with
<a href="" class="fb"><i class="fa fa-facebook"></i></a>
<a href="" class="tw"><i class="fa fa-twitter"></i></a>
<a href="" class="gp"><i class="fa fa-google-plus"></i></a>
<a href="" class="in"><i class="fa fa-linkedin"></i></a>
</div>
</section>
</div>
</div>
</body>