Question

您好我是html编程的新手，我正面临一个小问题。我设计了一个HTML表单，几个字段即可。姓名，年龄等我正在填写它们，下面有一个SAVE按钮。单击该按钮将在表单验证后在同一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>

Answer 1

要进行验证，使用HTML5表单属性pattern和required会更容易也更好。
作为参考，请参阅：http://www.w3schools.com/html/html5_form_attributes.asp
而且我没有看到用于在div中显示数据的任何代码！您首先需要发布代码以获得任何帮助。

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

1 个答案: