Question

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

例如，它允许用户启动单词“Are”或“What”而不是“Why”。

Answer 1

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

^(Why|Are).*$

HTML5输入模式示例：

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

测试here。

Answer 2

您可以向其添加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/

Answer 3

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;
}

当然你也可以使用正则表达式，因为我认为小效率更低。

这样的事情？：http://jsfiddle.net/4jasrbob/

Answer 4

非常类似于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字段以某些单词开头

4 个答案: