我对wordpress这个世界还不熟悉。有人建议我使用下划线给出的基本主题作为起始主题。我搜索栏是我的网站的基础,所以我想对其进行自定义,以便只接受用户的特定输入。
特别是,唯一可接受的输入必须是xay
哪里x
和y
是介于1和999之间的数字,并且a
必须是字母a。
接受输入的示例:1a2、222a999、130a28。
我读文章How do I add a simple jQuery script to WordPress?
和How to Properly Add jQuery Scripts to WordPress 关于如何在wordpress中正确添加jQuery脚本,但它不起作用。
这就是我目前所做的:
因为主题没有searchform.php
文件,我正在使用默认的搜索栏。在文件夹中wp-content\\themes\\mytheme\\js
我创建了文件searchbox.js
我在其中编写了以下代码
jQuery(function(){
$("#btn-search").click(function(){
$(".error").hide();
var hasError = false;
var searchReg = /^[0-9]+$/;
var searchVal = $("#search-text").val();
if(searchVal == \'\') {
$("#search-text").after(\'<span class="error">Please enter a search term.</span>\');
hasError = true;
} else if(!searchReg.test(searchVal)) {
$("#search-text").after(\'<span class="error">Enter valid text.</span>\');
hasError = true;
}
if(hasError == true) {return false;}
});
});
我找到了这个代码
here, 它将首先检查是否输入了文本,如果搜索框为空,则返回错误消息。然后检查输入的文本是否只包含数字字符。如果其中任何一个验证检查返回错误消息,则使用“return false”命令停止表单提交。
这并不是我想要的搜索栏,我用它只是为了尝试如何添加jQuery脚本。
然后在functions.php
我写的文件,在顶部,这个代码
function add_my_script() {
wp_enqueue_script(
\'searchbox\', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . \'/js/searchbox.js\', // this is the location of your script file
array(\'jquery\') // this array lists the scripts upon which your script depends
);
}
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
然后我尝试在我的网站上进行搜索,我在搜索框中没有写任何内容,而是单击了搜索按钮。没有出现错误消息,网站上的所有帖子都显示在此处。此外,我在搜索框中写了一个单词(由于命令
var searchReg = /^[0-9]+$/;
应只接受数字输入,但在显示的位置也不接受错误消息和页面。
我做错了什么?
EDIT
问题是由于
jQuery脚本中的错误搜索字段和搜索按钮ID未捕获类型错误:$不是函数解决方案
将btn搜索替换为。搜索提交,并#使用搜索文本。搜索字段将$替换为jQuery
最合适的回答,由SO网友:sound wave 整理而成
此代码执行此任务(有p
而不是a
)
jQuery(function(){
jQuery(".search-submit").click(function(){
jQuery(".error").hide();
var hasError = false;
var searchReg = /^[p0-9]+$/;
var searchVal = jQuery(".search-field").val();
var searchLen = searchVal.length;
var num1 = [\'1\',\'2\',\'3\',\'4\',\'5\',\'6\',\'7\',\'8\',\'9\'];
var num0 = [\'0\',\'1\',\'2\',\'3\',\'4\',\'5\',\'6\',\'7\',\'8\',\'9\'];
if(searchLen < 3) {
jQuery(".search-field").after(\'<span class="error">Enter at least 3 characters.</span>\');
hasError = true;
} else if(searchLen > 7) {
jQuery(".search-field").after(\'<span class="error">Enter no more than 7 characters.</span>\');
hasError = true;
} else if(num1.indexOf(searchVal.charAt(0)) == -1) {
jQuery(".search-field").after(\'<span class="error">First character has to be a digit between 1 and 9.</span>\');
hasError = true;
} else if(num0.indexOf(searchVal.charAt(searchLen-1)) == -1) {
jQuery(".search-field").after(\'<span class="error">Last character has to be a digit between 0 and 9.</span>\');
hasError = true;
} else if(!searchVal.includes(\'p\')) {
jQuery(".search-field").after(\'<span class="error">You have to enter the character "p".</span>\');
hasError = true;
} else if((searchVal.match(/p/g) || []).length > 1) {
jQuery(".search-field").after(\'<span class="error">Enter only 1 character "p".</span>\');
hasError = true;
} else if(!searchReg.test(searchVal)) {
jQuery(".search-field").after(\'<span class="error">Enter only digits and one "p" character.</span>\');
hasError = true;
} else if(searchVal.split(\'p\')[0].length > 3 || searchVal.split(\'p\')[1].length > 3) {
jQuery(".search-field").after(\'<span class="error">Exercise and page have to be numbers between 1 and 999.</span>\');
hasError = true;
} else if(searchVal.charAt(searchVal.indexOf(\'p\')+1) == \'0\') {
jQuery(".search-field").after(\'<span class="error">Page first digit cannot be 0.</span>\');
hasError = true;
}
if(hasError == true) {return false;}
});
});