我可以以某种方式使用 JQuery 设置一些 HTML5 验证吗?

Posted

技术标签:

【中文标题】我可以以某种方式使用 JQuery 设置一些 HTML5 验证吗?【英文标题】:Can I Set Some HTML5 Validation With JQuery In A Certain Way? 【发布时间】:2020-09-22 11:24:05 【问题描述】:

所以我的表单中有一个textarea,它有一个minlength="15"maxlength="2000"。但这意味着当用户达到 2000 个字符时,他就不能再打字了。我想要的是用户能够输入更多字符,但在提交时使用客户端验证来检查 textarea 值是否有效。如果不是,我想让它无效,并显示默认的 html5 验证气泡。到目前为止,这是我的代码:

textarea 
  min-height: 100px;
  min-width: 250px;


#charLeft 
  color: red;
<!DOCTYPE HTML>
<html lang="en-us">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <form action="" method="POST">
    <textarea placeholder="Describe Your Issue*" aria-placeholder="Describe Your Issue" name="describeIssue" id="describeIssue" class="describeIssue" onkeyup="countChar(this)" minlength="15" maxlength="2000" required></textarea>

    <div id="charLeft">0/15</div>
    <br />
    <input type="submit" />
  </form>

  <script type="text/javascript">
    function countChar(val) 
      let length = val.value.length;

      if (length > 15 && length < 2000) 
        $('#charLeft').html(length + '/2000');
        $('#charLeft').css('color', '#27ae60');
       else if (length < 15) 
        $('#charLeft').html(length + '/15');
        $('#charLeft').css('color', '#e74c3c');
       else 
        $('#charLeft').html(length + '/2000');
        $('#charLeft').css('color', '#e74c3c');
      
    
  </script>
</body>

如上所示,如果达到 2000 个字符的限制,textarea 将不再允许。我希望它超过 2000 个字符,但是当您提交时,如果超过 2000 个字符,请将其标记为无效。我不知道该怎么做,所以我需要一些帮助。我可以接受纯 JavaScript 或 JQuery。提前致谢,感谢您的帮助!

【问题讨论】:

【参考方案1】:

在 HTML 中,删除 maxlength 属性。这将允许用户输入超过 2000 个字符。在 JS 中,添加一个检查的提交处理程序,如下所示:

function countChar(val) 
  let length = val.value.length;

  if (length > 15 && length < 2000) 
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#27ae60');
   else if (length < 15) 
    $('#charLeft').html(length + '/15');
    $('#charLeft').css('color', '#e74c3c');
   else 
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#e74c3c');
  


$("form").submit((e) => 

  var val = $("#describeIssue").val();
  if (parseInt(val.length) > 2000) 
    e.preventDefault();
    alert("To Long!");
   else 
    //the user passed the lenghth
  
);
textarea 
  min-height: 100px;
  min-width: 250px;


#charLeft 
  color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<form action="" method="POST">
  <textarea placeholder="Describe Your Issue*" aria-placeholder="Describe Your Issue" name="describeIssue" id="describeIssue" class="describeIssue" onkeyup="countChar(this)" minlength="15" required></textarea>

  <div id="charLeft">0/15</div>
  <br />
  <input type="submit" />
</form>

此代码允许用户输入超过 2000 个字符,但如果输入有问题(超出长度),他们将无法提交输入。

【讨论】:

谢谢!这里唯一的问题是我想找到一种方法来看看你是否可以告诉表单这个textarea 是无效的,因此它会执行正常的invalid 运算符。如果不可能,请不要担心。我还是会接受这个答案! 这里有一个链接可以帮助解决这个问题:here@JasonD'Silva【参考方案2】:

您可以允许用户输入超过 2000 个字符,然后返回自定义错误消息,但您不能这样做并显示默认的 HTML5 错误。实现前者,移除maxlength="2000",在表单中添加onsubmit监听器,在监听器中检查文本长度是否超过2000个字符,然后决定是否提交表单。

function countChar(val) 
  let length = val.value.length;

  if (length > 15 && length < 2000) 
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#27ae60');
   else if (length < 15) 
    $('#charLeft').html(length + '/15');
    $('#charLeft').css('color', '#e74c3c');
   else 
    $('#charLeft').html(length + '/2000');
    $('#charLeft').css('color', '#e74c3c');
  


$('#describeIssue').on('submit', function(event) 
  if ($('#describeIssue').value.length > 2000) 
    event.preventDefault();
  
);
textarea 
  min-height: 100px;
  min-width: 250px;


#charLeft 
  color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST">
  <textarea placeholder="Describe Your Issue*" aria-placeholder="Describe Your Issue" name="describeIssue" id="describeIssue" class="describeIssue" onkeyup="countChar(this)" minlength="15" required></textarea>

  <div id="charLeft">0/15</div>
  <br />
  <input type="submit" />
</form>

【讨论】:

以上是关于我可以以某种方式使用 JQuery 设置一些 HTML5 验证吗?的主要内容,如果未能解决你的问题,请参考以下文章

NSUserDefaults - 我设置的默认值以某种方式被删除[关闭]

我可以以编程方式锁定我的iPhone屏幕吗?

可以在 gVim Editor 中以某种方式设置字母间距吗

是否可以以某种方式在表格行周围设置边框?

我可以以某种方式从java中的Collections.Min / Collections.Max中排除或过滤掉一个值吗?

带有修改功能的 PayPal 订阅按钮 - 我以某种方式破坏了它 - 怎么样?