Question

您好我正在根据存储在localStorage中的值显示一个pp窗口。在弹出窗口中有一个包含电子邮件和密码的表单。用户必须输入他的电子邮件和密码。现在我需要的是，用户输入的电子邮件必须发送到url，url返回状态（1或0）。如果url返回1，则用户可以继续登录进程。否则应显示错误消息。网址格式为http://www.calpinemate.com/employees/attendanceStatus/ 电子邮件 / 3“。在电子邮件的位置，应该是用户在表单中输入的电子邮件。这样我就必须通过电子邮件。通过这种方式，我正在进行表单验证。但我不知道该怎么做。这是我的userinfo.html

<!DOCTYPE html>
 <html>
<head>
    <script type="text/javascript" src="test.js"></script>

</head>
<body>
<b>Enter your Email ID and Password</b><br><br>
    <form id="userinfo">
        <label for="user">&nbsp;Email&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" id="user" />
        <br><br>
       <label for="pass">Password&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</label>
       <input type="password" id="pass" />
        <br>
        <br>
        <input type="button" id="login" value="Log In" />
    </form>
 </body>
 </html>

这是弹出窗口中的表单这是我的test.js

window.addEventListener('DOMContentLoaded', function() {
var user  = document.querySelector('input#user');
 var pwd  = document.querySelector('input#pass');
var login = document.querySelector('input#login');

login.addEventListener('click', function() {     

    var userStr = user.value;       

    login();
    window.close();

    chrome.runtime.getBackgroundPage(function(bgPage) {
            bgPage.updateIcon();
        });

}); 
function login(){
  var urlPrefix = 'http://www.calpinemate.com/employees/attendanceStatus/';
  var urlSuffix = '/3';

   var req = new XMLHttpRequest();

  req.addEventListener("readystatechange", function() {

 if (req.readyState == 4) {

   if (req.status == 200) {

       var item=req.responseText;

       if(item==1){  
           localStorage.username=userStr;
           localStorage.password=pwd;

       }
   else{ alert('error');}
   }
  }
  });
  var url = urlPrefix + encodeURIComponent(userStr) + urlSuffix;
 req.open("GET", url);
  req.send(null);
              }


     });

这是我的javascript。当用户按下登录按钮时，用户在电子邮件文本框中输入的内容都存储在localStorage.username中。现在我需要通过传递来检查是否存在这样的电子邮件ID电子邮件到上面指定的url.And如果它只存在它应该存储在localStorage.username.Please任何人帮助我。我尝试过使用上面的代码。但是请注意。请帮助我

Answer 1

以下是您可以编辑和使用下载源代码的资源，或在此处查看实时演示http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

这是一份联系表格。您可以将其更改为验证。像这样添加一个按钮或链接到你的页面

<p><a href="#inline">click to open</a></p>

“＃inline”这里应该是包含表格的“id”。

<div id="inline">
 <h2>Send us a Message</h2>
 <form id="contact" name="contact" action="#" method="post">
 <label for="email">Your E-mail</label>
 <input type="email" id="email" name="email" class="txt">
 <br>
 <label for="msg">Enter a Message</label>
 <textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
 </form>
</div>

包含这些脚本以收听点击事件。如果您在表单中定义了操作，则可以使用“preventDefault（）”方法

<script type="text/javascript">
 $(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
 $("#email").removeClass("error");
 }

 if(msglen < 4) {
 $("#msg").addClass("error");
 }
 else if(msglen >= 4){
 $("#msg").removeClass("error");
 }

 if(mailvalid == true && msglen >= 4) {
 // if both validate we attempt to send the e-mail
 // first we hide the submit btn so the user doesnt click twice
 $("#send").replaceWith("<em>sending...</em>");
 //This will post it to the php page
 $.ajax({
 type: 'POST',
 url: 'sendmessage.php',
 data: $("#contact").serialize(),
 success: function(data) {
 if(data == "true") {
 $("#contact").fadeOut("fast", function(){
//Display a message on successful posting for 1 sec
 $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
 setTimeout("$.fancybox.close()", 1000);
 });
 }
 }
 });
 }
 });
 });
</script>

您可以在PHP文件中添加任何想要做的事情。

弹出窗口中的表单验证

1 个答案: