如何使用jQuery验证将搜索栏设置为只接受特定输入?

时间:2019-05-29 作者:sound wave

我对wordpress这个世界还不熟悉。有人建议我使用下划线给出的基本主题作为起始主题。我搜索栏是我的网站的基础,所以我想对其进行自定义,以便只接受用户的特定输入。

特别是,唯一可接受的输入必须是xay 哪里xy 是介于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

1 个回复
最合适的回答,由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;}
    });
});

相关推荐

在插件中加入jQuery UI Datepicker的css的合适方式是什么?

我正在寻找一个日期选择器,我在另一个问题的答案中读到,jQuery UI的日期选择器包含在WordPress中。为了让它工作,我需要添加脚本包含wp_enqueue_script(\'jquery-ui-datepicker\'); 但现在它不见了。css,我试图在样式包含中添加此内容wp\\u enqueue\\u样式(“jquery-ui-datepicker”);但它没有起作用。然而,在我正在开发的WordPress中,我找到了数千个datepicker的参考资料。最后,我现在使用这个:w