Javascript 在同一html页面中显示表单数据_Javascript_Html_Validation

Javascript 在同一html页面中显示表单数据

javascript html validation

Javascript 在同一html页面中显示表单数据,javascript,html,validation,Javascript,Html,Validation,嗨，我是html编程新手，我面临一个小问题。我设计了一个HTML表单，其中有几个字段，即。姓名、年龄等。我正在填充它们，下面有一个保存按钮。单击该按钮将在表单验证后在同一html页面的单独div中显示输入的字段。我需要一些帮助。我在多次验证以及在div中显示项目时遇到问题 <html> <body> <form onsubmit="validation();"> <table border="2"> <tr>

嗨，我是html编程新手，我面临一个小问题。我设计了一个HTML表单，其中有几个字段，即。姓名、年龄等。我正在填充它们，下面有一个保存按钮。单击该按钮将在表单验证后在同一html页面的单独div中显示输入的字段。我需要一些帮助。我在多次验证以及在div中显示项目时遇到问题

<html>
<body>
<form onsubmit="validation();">
    <table border="2">
        <tr><td>First Name:</td><td><input type="text" name="fn" id="firstname"></td></tr>
        <tr><td>Last Name:</td><td><input type="text" name="ln" id="lastname"></td></tr>
        <tr><td>Father's First Name:</td><td><input type="text" name="ffn" id="ffirstname"></td></tr>
        <tr><td>Father's Last Name:</td><td><input type="text" name="fln" id="flastname"></td></tr>
        <tr><td>Age:</td><td><input type="text" name="ag" id="age"></td></tr>
        <tr><td>Gender:
                <select name="gend">
                <option value="male">Male</option>
                <option value="female">Female</option>
                </select>
        </td>   
        <td>Address:<textarea rows=4 cols=10 name="add" id="addr"></textarea></td></tr>
        <tr><td>Pincode:</td><td><input type="text" name="pc" id="pincode" maxlength="6"></td></tr>
        <tr><td>Phone Number:</td><td><input type="text" name="pn" id="phonenumber" maxlength="10"></td></tr>
        <tr><td>Mobile Number:</td><td><input type="text" name="mb" id="mobilenumber" maxlength="10"></td></tr>
        <tr><td colspan="2"><center><input type="submit" value="Save"></center></td></tr>
    </table>
    <script>
            function validation()
            {
                var x=document.getElementById("firstname").value;
                var y=document.getElementById("lastname").value;
                var z=document.getElementById("ffirstname").value;
                var v=document.getElementById("flastname").value;
                var a=document.getElementById("age").value;
                var alpha=/^[a-zA-Z]+$/;
                var valid=true;

                if(!x.match(alpha))
                {
                    alert("Alphabets only!");
                    valid=false;
                }
                if(!y.match(alpha))
                {
                    alert("Alphabets only!");
                    valid=false;
                }
                if(!z.match(alpha))
                {
                    alert("Alphabets only!");
                    valid=false;
                }
                if(!v.match(alpha))
                {
                    alert("Alphabets only!");
                    valid=false;
                }
                if(a<18 || a>30)
                {
                    alert("Age should be between 18-30");
                    valid=false;
                }


            }

    </script>

</body>
</html>


名字：
姓氏：
父亲的名字：
父亲的姓：
年龄：
性别：
男性
女性
地址:
Pincode：
电话号码：
手机号码：
函数验证（）
{
var x=document.getElementById（“firstname”）.value；
var y=document.getElementById（“lastname”）.value；
var z=document.getElementById（“ffirstname”）.value；
var v=document.getElementById（“flastname”）.value；
var a=document.getElementById（“年龄”）.value；
var alpha=/^[a-zA-Z]+$/；
var valid=true；
如果（！x.match（alpha））
{
警告（“仅限字母表！”）；
有效=错误；
}
如果（！y.match（alpha））
{
警告（“仅限字母表！”）；
有效=错误；
}
如果（！z.match（alpha））
{
警告（“仅限字母表！”）；
有效=错误；
}
如果（！v.match（alpha））
{
警告（“仅限字母表！”）；
有效=错误；
}
如果（a30）
{
警惕（“年龄应在18-30岁之间”）；
有效=错误；
}
}

要进行验证，使用HTML5表单属性

模式

和

必需的
更容易、更好。有关参考信息，请参阅：

我没有看到任何用于在div中显示数据的代码！您首先需要发布代码，以便获得任何帮助。
如果您有特定问题，它会有所帮助。“有问题”并没有告诉我你在哪里需要帮助。他说的^^实际上，你所缺少的只是一些getElementById JavaScript来填充你的div中的表单字段。如何在同一页的单独div中显示表单中输入的数据？@durbnpoisn没有理解你。你能给我详细解释一下吗？@BiswarupDass:div
在哪里？您可以通过id
（就像您已经做的那样）识别元素，并将其innerHtml
属性设置为任何值，例如。这就是问题所在。我需要有关如何在div中显示数据的帮助使用以下示例：HTML:
JavaScript:document.getElementById（“fn”）.innerHTML=document.getElementById（“firstname”）.value