-1

嗨,我想将用户输入的所有表单数据显示到下一个 HTML 页面,但我唯一使用 javascript 进行表单验证和 HTML。任何帮助将不胜感激。

<head>
<link rel="stylesheet" href="main.css" type="text/css">
<title>A simple Form Validation</title>
</head>
<script type='text/javascript'>

function formValidator(){
    // Make quick references to our fields
    var businessname = document.getElementById('businessname');
        var firstname = document.getElementById('firstname');
        var lastname = document.getElementById('lastname');
        var email = document.getElementById('email');
        var phone = document.getElementById('phone');
        var fax = document.getElementById('fax');


        // Check each input in the order that it appears in the form!
        if(isAlphabet(businessname, "Please enter only letters for your Businessname")){
          if(isAlphabet(firstname, "Please enter only letters for your name")){
            if(isAlphabet(lastname, "Please enter only letters for your last name")){
              if(isNumeric(phone, "Please enter numbers for your phone no")){
                if(isNumeric(fax, "Please enter numbers for your fax")){
                  if(emailValidator(email, "Please enter a valid email address")){
                                return true;
                            }
                        }
                    }
                }
            }
        }




    return false;

}

function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function lengthRestriction(elem, min, max){
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}

function madeSelection(elem, helperMsg){
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

</script>

<form onsubmit='return formValidator()' method="POST" action="index.htm">

<table>
<tbody>
<div id="header-container">
<div id="header">
    <div id="logo">
    <a href="#"><img src="bus.jpg" /></a>
    </div>
    <div id="navbar">
    <ul id="nav">
        <li><a id="Home" alt="home">Home</a></li>
        <li><a id="contactus" alt="contact Us">Contact Us</a></li>
    </ul>
    </div><br><br>
<tr>
    <td><label for="Business Name">Business Name:</label></td>
    <td><input name="Business Name" id="businessname" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="First Name">First Name:</label></td>
    <td><input name="First Name" id="firstname" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Last Name">Last Name:</label></td>
    <td><input name="Last Name" id="lastname" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Email">Email:</label></td>
    <td><input name="Email" id="email" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Phone">Phone:</label></td>
    <td><input name="Phone" id="phone" size="30" maxlength="40" type="text"></td>
</tr>
<tr>
    <td><label for="Fax">Fax:</label></td>
    <td><input name="Fax" id="fax" size="30" maxlength="40" type="text"></td>
</tr>
</tbody>
</table>
<input type='submit' value='Submit' />
</form>

这是我的表单,我对其进行了验证...现在我想在下一页显示表单值...

4

3 回答 3

1

如果您无法选择使用服务器端编程,例如 PHP,您可以使用查询字符串或 GET 参数。

在表单中,添加一个 method="GET" 属性:

<form action="your.html" method="GET">
    <input type="text" name="name" />
    <input type="submit" value="Submit" />
</form>

当他们提交此表单时,用户将被定向到包含名称值作为参数的地址。就像是:

http://www.example.com/display.html?name=XYZ

然后,您应该能够使用 window.location.search 值从 JavaScript 解析查询字符串(其中将包含名称参数值):

// from your.html
document.getElementById("write").innerHTML = window.location.search;

这可以帮助你...`在下一个 html 页面上填写表格

于 2013-10-08T07:49:47.467 回答
0

可能这可以帮助你http://wiseadvance.com/teaching/web_design/tutorials/get_data_from_forms/

更好地使用任何服务器端脚本来显示数据。

于 2013-10-08T07:37:00.893 回答
0

您必须使用服务器端脚本或使用 HTML5 LocalStorage

于 2013-10-08T07:37:23.827 回答