Question

我需要使用JavaScript作为验证方法来验证是否已将数据输入到必需的HTML表单字段中。

请查看当前代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>

<form id="myForm" name="myForm">
    <fieldset>
    <legend>Your Information Please:</legend>
    <input type="text" name="Your_Name" placeholder="First Name"><br>
    <input type="text" name="lastname" placeholder="Last Name"><br>
    <input type="email" size="32" maxLength="32" required pattern=".+@apus.com" placeholder="APUS Email" />
    </fieldset>
    <fieldset>
    <legend>Please choose your favorite subject:</legend>
        <select name="subjects">
        <option>Math</option>
        <option>Science</option>
        <option>History</option>
        <option>English</option>
        <option>Art</option>
        </select><br><br>
<input type="submit" value="Submit Data" onclick="return checkForm(this.form);" />
    </fieldset>
</form>

<script>
function checkName()
{
    if(document.getElementById('myForm').value === "")
    alert("Enter something");
    return false;
}
</script>
</body>
</html>

预期结果应该是，如果未输入任何表示“请输入您的名字”的对话框，则会出现该对话框。

如果没有输入姓氏，但输入了名字“请输入您的姓氏”。

如果已经输入了名字和姓氏，则需要输入电子邮件。我已经通过使用HTML的“ required pattern”属性来完成了这一部分。

Answer 1

作为旁注，如果要验证任何类型的输入，则必须确保您还在服务器端（而不只是客户端验证）进行验证。客户端验证仅用于UX，可以轻松进行转义。

在您的情况下，您将可以使用以下内容：

为每个输入字段提供一个“ id”：

R> sessioninfo::session_info()
- Session info -----------------------------------------------------------------------------------
 setting  value                         
 version  R version 3.5.1 (2018-07-02)  
 os       Windows 10 x64                
 system   x86_64, mingw32               
 ui       RTerm                         
 language (EN)                          
 collate  English_United States.1252    
 ctype    Chinese (Simplified)_China.936
 tz       America/New_York              
 date     2019-04-14                    

- Packages ---------------------------------------------------------------------------------------
 package     * version date       lib source        
 assertthat    0.2.1   2019-03-21 [1] CRAN (R 3.5.3)
 cellranger    1.1.0   2016-07-27 [1] CRAN (R 3.5.0)
 cli           1.1.0   2019-03-19 [1] CRAN (R 3.5.3)
 codetools     0.2-16  2018-12-24 [1] CRAN (R 3.5.2)
 crayon        1.3.4   2017-09-16 [1] CRAN (R 3.5.0)
 digest        0.6.18  2018-10-10 [1] CRAN (R 3.5.1)
 dplyr       * 0.8.0.1 2019-02-15 [1] CRAN (R 3.5.3)
 evaluate      0.13    2019-02-12 [1] CRAN (R 3.5.3)
 glue          1.3.1   2019-03-12 [1] CRAN (R 3.5.3)
 htmltools     0.3.6   2017-04-28 [1] CRAN (R 3.5.0)
 knitr       * 1.22    2019-03-08 [1] CRAN (R 3.5.3)
 magrittr      1.5     2014-11-22 [1] CRAN (R 3.5.0)
 memoise       1.1.0   2017-04-21 [1] CRAN (R 3.5.0)
 pillar        1.3.1   2018-12-15 [1] CRAN (R 3.5.2)
 pkgconfig     2.0.2   2018-08-16 [1] CRAN (R 3.5.1)
 purrr         0.3.2   2019-03-15 [1] CRAN (R 3.5.3)
 R6            2.4.0   2019-02-14 [1] CRAN (R 3.5.3)
 Rcpp          1.0.1   2019-03-17 [1] CRAN (R 3.5.3)
 readxl      * 1.3.1   2019-03-13 [1] CRAN (R 3.5.3)
 rlang         0.3.4   2019-04-07 [1] CRAN (R 3.5.3)
 rmarkdown     1.12    2019-03-14 [1] CRAN (R 3.5.3)
 sessioninfo   1.1.1   2018-11-05 [1] CRAN (R 3.5.1)
 skimr       * 1.0.5   2019-02-25 [1] CRAN (R 3.5.3)
 stringi     * 1.4.3   2019-03-12 [1] CRAN (R 3.5.3)
 stringr       1.4.0   2019-02-10 [1] CRAN (R 3.5.3)
 tibble      * 2.1.1   2019-03-16 [1] CRAN (R 3.5.3)
 tidyr         0.8.3   2019-03-01 [1] CRAN (R 3.5.3)
 tidyselect    0.2.5   2018-10-11 [1] CRAN (R 3.5.1)
 withr         2.1.2   2018-03-15 [1] CRAN (R 3.5.0)
 xfun          0.6     2019-04-02 [1] CRAN (R 3.5.3)
 yaml          2.2.0   2018-07-25 [1] CRAN (R 3.5.1)

Answer 2

Rami我喜欢您的回答，但是我确实根据一些评论自己弄清楚了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>

<form id="myForm" name="myForm">
    <input type="text" name="firstname" placeholder="First Name"><br>
    <input type="text" name="lastname" placeholder="Last Name"><br>
    <input type="email" name="email" size="32" maxLength="32" required pattern=".+@apus.com" placeholder="APUS Email" />
    <br><br>
    Please choose your favorite subject:
    <br>
        <select name="subjects">
        <option>Math</option>
        <option>Science</option>
        <option>History</option>
        <option>English</option>
        <option>Art</option>
        </select><br><br>
<input type="submit" value="Submit Data" onclick="return checkForm(this.form);" />
</form>

<script>
    function checkForm()
    {
        var str = '';
        var elem = document.getElementById('myForm').elements;
        for(var i = 0; i < elem.length; i++)
        {
           if(elem[i].value.length < 1)
{
alert("Enter something for the field: " + elem[i].name);
var mytext = document.getElementById(elem[i].name); 
    mytext.focus();
return false;}
        } 
     }
</script>
</body>
</html>

如何使用JavaScript在HTML表单上执行表单验证？

2 个答案: