时间戳

首页 > 解决方案 > 如何在 HTML 中验证我的 html 表单？没有警报，只有当输入字段不包含所需模式时显示错误

javascript - 如何在 HTML 中验证我的 html 表单？没有警报，只有当输入字段不包含所需模式时显示错误

问题描述

电话- 文本字段 - 需要验证（格式必须为“208-555-5555”。将此字段命名为电话。

信用卡- 文本字段 - 需要验证（必须是 16 位数字）。将此字段命名为 credit_card。必须使用这种格式：1111 1111 1111 1111

信用卡到期日期- 文本字段 - 需要验证输入的数据（即有效月份 (1-12) 和有效年份 (> 2020)。将此字段命名为 exp_date。它必须使用以下格式：01/2020。

提交按钮- 单击此按钮时，您应确认名字、姓氏、地址、电话、信用卡和到期日期字段均已填写。如果任何字段缺少文本，请阻止表单提交并将焦点设置到第一个缺少的文本字段。

<input type = "tel" id = "phone" class ="validate" name = "phone" pattern ="^\d{3}-\d{3}-\d{4}$"required placeholder = " +233-55-1018-495" title =" Your phone number should match the format displayed">

<div>
            <label for="cname">Name on Card</label>
            <input type="text" id="cname" name="cardname" placeholder="Nana Dickson"><br><br>
            <label for="ccnum">Credit Card</label>
            <input type="text" id="ccnum" name="credit_card" class ="validate" placeholder="1111-1111-1111-1111"><br><br>
            </div>

            <div class="row">
              <div class="col-50">
                <label for="expyear">Credit Card Expiration Date</label>
                <input type="text"  class ="validate" id="exp_date" name="exp_date" placeholder="01/2021"
              <div class="col-50"><br>
                <label for="cvv">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="352">
              </div>
            </div>
          </div>

<input type="submit" value="Submit" class="btn" name ="validate">

标签： javascripthtml

解决方案

看一下这个

<head> 

    <script> 

        function submitform() { 

            var name =  

                document.forms["RegForm"]["Name"]; 

            var email =  

                document.forms["RegForm"]["EMail"]; 

            var phone =  

                document.forms["RegForm"]["Telephone"]; 

            var what =  

                document.forms["RegForm"]["Subject"]; 

            var password =  

                document.forms["RegForm"]["Password"]; 

            var address =  

                document.forms["RegForm"]["Address"]; 



            if (name.value == "") { 

                window.alert("Please enter your name."); 

                name.focus(); 

                return false; 

            } 



            if (address.value == "") { 

                window.alert("Please enter your address."); 

                address.focus(); 

                return false; 

            } 



            if (email.value == "") { 

                window.alert( 

                  "Please enter a valid e-mail address."); 

                email.focus(); 

                return false; 

            } 



            if (phone.value == "") { 

                window.alert( 

                  "Please enter your telephone number."); 

                phone.focus(); 

                return false; 

            } 



            if (password.value == "") { 

                window.alert("Please enter your password"); 

                password.focus(); 

                return false; 

            } 



            if (what.selectedIndex < 1) { 

                alert("Please enter your course."); 

                what.focus(); 

                return false; 

            } 



            return true; 

        } 

    </script> 



    <style> 

        div { 

            box-sizing: border-box; 

            width: 100%; 

            border: 100px solid black; 

            float: left; 

            align-content: center; 

            align-items: center; 

        } 



        form { 

            margin: 0 auto; 

            width: 600px; 

        } 

    </style> 

</head> 



<body> 

    <h1 style="text-align: center;">REGISTRATION FORM</h1> 

    <form name="RegForm" action="/submit.php" 

          onsubmit="return submitform()" method="post"> 

        <p>Name: <input type="text" 

                        size="65" name="Name" /></p> 

        <br /> 

        <p>Address: <input type="text" 

                           size="65" name="Address" /> 

      </p> 

        <br /> 

        <p>E-mail Address: <input type="text" 

                        size="65" name="EMail" /></p> 

        <br /> 

        <p>Password: <input type="text" 

                     size="65" name="Password" /></p> 

        <br /> 

        <p>Telephone: <input type="text" 

                    size="65" name="Telephone" /></p> 

        <br /> 



        <p> 

            SELECT YOUR COURSE 

            <select type="text" value="" name="Subject"> 

                <option>BTECH</option> 

                <option>BBA</option> 

                <option>BCA</option> 

                <option>B.COM</option> 

                <option>Ms</option> 

            </select> 

        </p> 

        <br /> 

        <br /> 

        <p>Comments: <textarea cols="55" 

                          name="Comment"> </textarea></p> 

        <p> 

            <input type="submit" 

                   value="send" name="Submit" /> 

            <input type="reset" 

                   value="Reset" name="Reset" /> 

        </p> 

    </form> 

</body>

推荐阅读