最近在制作网页搜索框遇到了相关问题,大概需求是搜索输入框,如果不填文字点提交,提示“请输入内容”,如果输入的字数小于xx个,提示“字数不能少于xx个”,如果输入的字数大于xxx个,提示“字数不能超过xxx个”,另外一个页面两个搜索框,form的信息都是一样时第二个搜索框提示不出错,以下是具体代码。
其中使用了layer.msg的弹窗效果,需要引入相关js。
html部分:
头部需要引入的js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
第一个输入框,位于header里
<div class="search">
<form action="index.php" method="get" name="searchform" id="searchform">
<input name="keyword" id="keyword" class="input_text" value="" placeholder="输入关键字进行搜索" type="text">
<input class="input_submit" value="" type="submit">
</form>
</div>
第二个输入框,在main里
<div class="search search-list">
<form action="index.php" method="get" name="searchform" id="searchform">
<input name="keyword" id="keyword" class="input_text" value="" placeholder="输入关键字进行搜索" type="text">
<input class="input_submit" value="" type="submit">
</form>
</div>
js代码部分:
// 判断搜索框中输入的字数
$(".input_submit").on("click", function(e) {
e.preventDefault(); // 阻止默认的表单提交行为
// 获取当前form元素
var form = $(this).closest("form");
// 获取当前form元素中name为keyword的input元素的值并计算长度
var val = form.find("input[name='keyword']").val();
if (val.trim() === "") {
// 如果输入框的值为空,则弹出提示框
layer.msg("请输入内容", {time: 1500});
return;
}
var len = 0;
for (var i = 0; i < val.length; i++) {
var charCode = val.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) {
len += 1;
} else {
len += 2;
}
}
// 判断长度是否符合要求
if (len < 2) {
// 弹出提示框
layer.msg("字数不能少于" + 2 + "个", {time: 1500}); // 1.5秒后自动关闭提示框
} else if (len >= 12) {
// 弹出提示框
layer.msg("字数不能超过" + 12 + "个", {time: 1500}); // 1.5秒后自动关闭提示框
} else {
// 如果长度符合要求,则提交表单
$("form").submit();
}
});
另外,判断输入内容为空,也可以使用html5表单自带的 setCustomValidity 来实现提示信息,样式比较固定,具体可以百度。