只允许HTML字段以某些单词开头

Only allow HTML field to start with certain words

本文关键字：单词 开头 字段 HTML      更新时间：2023-09-26

是否有一个快速的javascript库或代码只允许用户使用预设的单词选择来启动表单输入？

例如，它允许用户以单词"Are"或"What"开头，但不允许以"Why"开头。

您可以使用以下Regex。（这真的很原始，应该根据您的情况进行改进。）

^(Why|Are).*$

HTML5输入模式示例：

<form>
  <input type="text" pattern="^(Why|Are).*$">
  <input type="submit">
</form>

在这里测试。

您可以将change或input事件侦听器添加到其中并验证内容。为了避免首字母为几个的假阴性，可以在输入字符串包含空格后开始检查。你不需要图书馆就可以做到这一点。普通的老JS会做这项工作。

var input = document.getElementById("myinput");
input.addEventListener('input', validate);
function validate(e) {
    var validStart = ['why', 'when'];
    var tmpVal;
    if (this.value.indexOf(' ') !== -1) {
        tmpVal = this.value.toLowerCase().trim();
        if (validStart.indexOf(tmpVal) === -1) {
            input.classList.add('notvalid');
        } else {
            input.classList.remove('notvalid');
        }
    } else {
        input.classList.remove('notvalid');
    }
}

JSFiddle：http://jsfiddle.net/ofx2yhzm/1/

与Strah的答案非常相似，但无论如何都是这样：

function checkValue(el) {
  // Trim only leading whitespace so responds when first space entered
  // and break into words
  var words = el.value.replace(/^'s+/,'').split(/'s+/);
  // List of allowed words
  var allowed = ['are','what'];
  // Element to write message based on source element
  var msg = document.getElementById(el.id + 'Msg');
  // Clear error message by default
  msg.innerHTML = '';
  // Only do something if at least one word has been entered
  // Could also check if first word has more letters than
  // longest allowed word
  if (words.length > 1) {
    // Check if first word is allowed
    if ( allowed.indexOf(words[0].toLowerCase()) == -1) {
      msg.innerHTML = 'Input must start with one of ' + allowed.join(', ');
    }
  }
}

一些标记：

<input id="foo" oninput="checkValue(this);">
<span id="fooMsg"></span>

这允许用户在出现错误之前至少输入一个单词。他们还应该在屏幕上得到一些提示，让他们知道该用哪个词，而不是必须先弄错（这种情况肯定会发生很多）。

Html:

<form name="myform" method="post" action="#" onsubmit="return validate()">
<input type="text" name="val" />
<input type="submit" value="Submit" />
</form>

Javascript：

window.validate = function(){
data = document.forms['myform']['val'].value;
var starts = ['hi','he'];
for (var i = 0; i <= starts.length; i++)
    if (data.indexOf(starts[i]) === 0) return true;
return false;
}

当然，你也可以使用Regex，我想这会有点效率低下。

像这样的东西？：http://jsfiddle.net/4jasrbob/

相关文章：