Question

我有搜索字段，它没有那个典型的提交按钮。它看起来像这样：

HTML：

<div class="input-group">
    <input type="text" class="form-control" name="keyword" id="searchbox" onkeypress="return checkLength()"/>
    <span class="btn btn-primary input-group-addon" onclick="checkLength()"><i class="fa fa-search"></i></span>
</div>

我只为提交按钮添加了span而不是input元素。如何验证用户是否键入或输入不少于2个字符？如果用户仅键入1个字符，然后按下该搜索按钮或只需按回车键，则搜索字段底部应显示红色错误消息＆＃34;关键字应不少于2个字符＆＃34;或类似的东西。

我尝试了这段代码，但它无法运行：

function checkLength(){
    var textbox = document.getElementById("searchbox");
    if(textbox.value.length <= 10 && textbox.value.length >= 2){
        alert("success");
    } else {
        alert("Keyword should be not less than 2 characters");
        $(document).keypress(function (e) {
            var keyCode = (window.event) ? e.which : e.keyCode;
            if (keyCode && keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });
    }
}

需要帮助。感谢。

编辑：

输入关键字并点击回车键后，页面会重定向到搜索结果页面，但如果输入的关键字没有2个或更多字符，则应该防止这种情况发生，因此，在下面显示红色文本错误消息搜索字段。怎么做？

Answer 1

您可以在HTML5输入中使用pattern属性，只需使用CSS验证文本：

.error {
  display: none;
  font: italic medium sans-serif;
  color: red;
}
input[pattern]:required:invalid ~ .error {
  display: block;
}

<form>
  <input type="text" name="pattern-input" pattern=".{2,}" title="Min 2 characters" required>
  <input type="submit">
  <span class="error">Enter at least two characters</span>
</form>

以下是Fiddle

注意：这适用于所有现代浏览器，IE9和早期似乎不支持：invalid，：valid和：迄今为止所需的CSS伪类，而且Safari只有部分支持。

Answer 2

可以使用Jquery Validation插件。这很简单。

＆＃13;

$(document).ready(function(){
    $("#registerForm").validate();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   <p>
   Search <input type='text' name='name' id='name'  minlength="2"     class='required' />
   </p>
</form>

＆＃13;

参考： http://jqueryvalidation.org/documentation/

Answer 3

尝试使用- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; cell.selectionStyle = UITableViewCellSelectionStyleBlue; cell.textLabel.textColor=[UIColor blackColor]; cell.textLabel.font=[UIFont fontWithName:@"Helvetica Neue" size:14.0]; if (indexPath.section == 0) { switch (indexPath.row) { case 0: cell.textLabel.text=@"Sub-Scheme 1"; break; case 1: cell.textLabel.text=@"Sub-Scheme 2"; break; case 2: cell.textLabel.text=@"Sub-Scheme 3"; break; case 3: cell.textLabel.text=@"Sub-Scheme 4"; break; case 4: cell.textLabel.text=@"Sub-Scheme 5"; break; default: break; } }else{ cell.textLabel.text=@" "; } return cell; }选择.previousElementSibling span选择.nodeName设置input div以清空字符串.innerHTML或{ {1}}，使用""事件

＆＃13;

"Keyword should be not less than 2 characters"

＆＃13;

input

＆＃13;

var msg = document.getElementById("msg");

function checkLength(elem) {
  var el = elem.type === "text" ? elem : elem.previousElementSibling
  , len = el.value.length < 2;
  msg.innerHTML = len ? "Keyword should be not less than 2 characters" : "";
  $(el).one("input", function() {
    checkLength(this)
  })
}

＆＃13;

Answer 4

我做了jsfiddle，可能接近你想要的。

带上一只雄鹅，看看你能做些什么。

不要犹豫提问。

我最好的解释是：

input和submit按钮上都有一个事件处理程序，用于测试输入的值。根据我从您的问题中假设的条件，显示成功警报或错误消息。成功警报可以用ajax调用替换或触发表单提交。

搜索字段中的最大字符数

4 个答案: