使用HTML和JavaScript验证表单 - 检查表单输入与数组中的值匹配

时间:2015-02-26 11:16:20

标签: javascript html forms

我有一个简单的网络表单,它接受用户登录的电子邮箱和密码。 我想检查用户的电子邮件和密码是否与存储在外部javascript文件中的内容相匹配,如果组合匹配,则进入index.html页面。

我的数组在路由器文件中声明如下:

var USERS = { users: [] };

function User(type, useremail, password) {
 this.type = type;
 this.useremail = useremail;
 this.password = password;
}

var Bob = new User("rep", "bob@bob.com", "qwerty");
USERS.users.push(Bob);

var Helen = new User("rep", "helen@helen.com", "test");
USERS.users.push(Helen);

var Dominic = new User("customer", "dom@dom.com", "1234");
USERS.users.push(Dominic);

var James = new User("grower", "james@james.com", "pass1");
USERS.users.push(James);

我的html表格如下:

 <div id="loginform"> 
    <form id ="login" name="login" method="post" accept-charset="utf-8" onsubmit="return verify();"> 
        <h1>&nbsp;</h1>
        <label>
        <span>Email Address:</span>
        <input id="email" type="email" name="email" placeholder="Enter a valid email address" required />
        </label>
        <br>
        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" required />
        </label>
        <br> <br>
        <label id="reset"><a href="#">Click here to reset your password</a>               
        </label>
        <br>
        <label>
        <span>&nbsp;</span>
        <input id="submit_button" type="submit" value="Login" />
        </label>       

<!-- <input type="submit" value="Login" onsubmit = "verify()"> --><!--  <input type="submit" name="submit" value="Send"> -->

      </form> <!-- End of log in form -->
   </div>

我尝试检查用户电子邮件和密码组合是否匹配:

function verify() {

validUser = false;

    for (var x in USERS.users){
        //console.log(USERS.users[x].userid);
        if (query.useremail === USERS.users[x].useremail
           && query.password === USERS.users[x].password)              
        {
                validUser = true;
                break;
         } // end of if

    }// end of for

  console.log(validUser);

    if (validUser === true){
    console.log("logged in");
    res.render('index.html');
    }
}

万一你需要看到它,我的路由器中的一个部分我会根据请求反馈登录页面:

    app.get('/views/login.html', function (req, res) {
        res.render('../views/login.html');
        //console.log("Log in page displayed");

    });


    app.post('/views/login.html', function (req, res) {
        var url_parts = url.parse(req.url, true);
        var query = url_parts.query;

    console.log(query);
    console.log("Username: " + query.useremail);
    console.log("Password: " + query.password);

});

我对所有不同的代码和文件感到困惑......如何验证用户是否可以登录?

我在哪里放置我的verify()函数?我目前在用户数据下面的路由器文件中有它 - 但是我想在HTML中使用它,所以我考虑在那里放入标签......?

1 个答案:

答案 0 :(得分:0)

我认为您使用Javascript作为NodeJS的服务器,然后您需要为<form id ="login" action="path"...方法POST创建路由。在服务器中:

app.post([path type on action], function(req, res) {
 verify();
}

您捕获输入值:req.body.[attr name of input]。例如,对于电子邮件:

var email = req.body.email;