在 HTML 中创建一个留言簿应用程序，并在输入字段中添加一些条件

Posted 2023-05-09

【中文标题】在 HTML 中创建一个留言簿应用程序，并在输入字段中添加一些条件

【英文标题】：Create a guestbook application in HTML with some conditions in the input fields

【发布时间】：2017-06-21 20:59:26

【问题描述】：

我想在 html 中创建一个留言簿应用程序页面，其中有 3 个字段供用户输入：

姓名

电子邮件

留言

我想让客户端检查 javascript，所以下面是我在 html 页面头部添加的代码的 sn-ps。

对于名称，我需要设置一个条件，因此只能输入字母，不能输入数字，不能特殊字符，不能有空格或空白字段，所以我做了这个

function Validate()

    var x=document.forms["guest"]["email"].value;
    var y=document.forms["guest"]["name"].value;
    var regex=/^[a-zA-Z]+$/;

    if( y==null || y=="" || (!y.match(regex)))
    
        alert("Please enter your Name! ");
        return false;
    

我的问题是：如何插入条件，使名称必须大于 3 个字母？

对于电子邮件字段我做了这个：

if(x==null || x=="")

    alert("Please enter your email address!");
    return false;

var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

    alert("Not a valid e-mail address");
    return false;

else
    return true;

这里我没有任何问题。

对于消息字段，我需要添加一个条件，因此消息必须大于 10 个字符。

你能帮我解决这个问题吗？

谢谢

【问题讨论】：

字符串有一个可以检查的.length 属性。

了解 HTML5 输入。您正在寻找的大部分内容已经内置。

一点不相关的建议。帮自己一个忙，给你的变量有意义的名字。在 4 个月内，当您的代码更复杂并且您不记得编写这部分时，您会讨厌自己为它们命名像 x 和 y 这样的东西。

【参考方案1】：

你真的不需要 javascript：

<form action="">
  <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,4$" name="email" required title="Valid email required" required>
  <br>
  <input type="text" pattern="[a-zA-Z]3," name="name" required title="Letters only and at least 4 characters" required>
  <br>
  <input type="text" pattern=".10," name="message" required title="10 characters minimum" required>
  <br>
  <button>Submit</button>
</form>

【讨论】：

姓名的长度应超过 3 个字母。

@Nils 你是对的，我错过了最少 4 个字母。也就是说，您对pattern="[a-zA-Z]+.3," 的建议编辑是错误的，因为它会否定仅字母的要求。更正为pattern="[a-zA-Z]3,"，这两者都强制执行。另外，请注意，编辑答案通常不受欢迎，即使编辑正确，这些编辑也很可能被拒绝。您对这个问题的建议是正确的:)

【参考方案2】：

你应该看看 length 属性。

例如：

var y=document.forms["guest"]["name"].value;

if(y.length < 3) 
    alert("Not a valid name");
    return false;

有关w3schools 上的长度属性的更多信息

---

另一种选择是使用 HTML5 minlength 属性：

<label>Username: <input name=u required minlength=3></label>

W3 上的 minlength 属性的更多信息

【讨论】：

非常感谢。.length 属性非常简单。但我是一个初学者，在谷歌上搜索了几个小时以找到如何对输入字段的长度设置条件。我也为这样的消息字段解决了这个问题：“ if (y==null || x==null || z.length