Jquery/Form -检查输入字段长度至少为5个字符-并且也不匹配某些单词

Jquery/Form - check input field is at least 5 characters long - and also doesn't match certain words

本文关键字：字符 单词 5个 不匹配 检查 Form 输入 字段 Jquery 段长度      更新时间：2023-09-26

我有一个非常简单的表单。全名/电子邮件。我想做的是用jquery检查，以确保他们在名称字段中输入至少5个字符。如果没有，那么我不希望提交表单，而是希望在表单下面打印一些HTML，显示警告/错误消息。我怎样才能做到这一点呢?

我也可以手动添加文字到脚本，以确保他们没有在名称字段输入?如果他们要确保它再次打印错误……例如，如果他们输入了单词"bobby"或"stephanie"，我不希望在输入这些精确的单词时提交表单。我想要屏蔽的只有5到6个单词，所以我可以手动输入它们，在脚本中没有任何问题，而不会膨胀任何东西。提前谢谢你。

这是我的HTML

<div id="div1">
<label id="name-label" for="full_name">Name</label>
<input id="full_name" type="text" name="name" tabindex="1" autofocus="1">
</div>
<div id="div2">
<label id="email-label" for="email_address">Email</label>
<input id="email_address" type="email" tabindex="2" name="email">
</div>

这是我想要打印的附加HTML如果jquery检查为false

<div id="error">
<span class="error_message">Please enter your full name</span>
</div>

让我们假设您的表单有myForm中的id 

var words = ["bobby", "stephanie"];
jQuery('#myForm').on('submit', function(evt) {
    var form = $(this);
    var full_name = form.find('#full_name');
    var name_length = full_name.val().length;
    if( name_length < 5 ) {
        jQuery('#error').show();
        evt.preventDefault();
    }
    if( jQuery.inArray(full_name.val(), words) ) {
        evt.preventDefault();
    } 
});

我的回答是:我们可以构造两个if语句:

  1. 测试输入长度是否超过5个字符，
  2. 测试输入是否与禁用单词列表匹配(为了方便和冗长，存储在数组中)

第二个条件语句有点复杂，因为我们想要精确匹配(因此，使用'bobby'会升起一个标志，而不是' boby123 ')。这涉及到使用词边界，'b。

您可以在这里查看正在运行的代码:http://jsfiddle.net/teddyrised/kmMcC/

$('form').submit(function(e) {
    var errorFlag = 0,
        bannedWords = [
            'bobby',
            'stephanie'
        ],
        bannedObj = new RegExp('''b'+bannedWords.join('|')+'''b', 'i');
    if($('#full_name').val().length <= 5) {
        errorFlag = 1;
    }
    if(bannedObj.test($('#full_name').val())) {
        errorFlag = 1;    
    }
    // Act on error flag, prevent form submission when one or more error flags are raised
    if(errorFlag) e.preventDefault();
});

假设您将这些都放在表单元素中，并为其添加input type='submit'元素，我建议将表单的onsubmit属性设置为"return Validate();"，并添加以下验证函数。

首先，你要隐藏消息就绪使用:$('error').hide();

function Validate(){
    var minLength = 5;
    var blockedNames = ["bobby","stephanie"];
    var fName = $('#full_name').val();
    if(fName.length < minLength){
        $('#error').show();
        $('#full_name').focus();
        return false;
    }
    for(var i = 0;i < blockedNames.length;i++){
        if(fName == blockedNames[i]){
            $('#error').show();
            $('#full_name').focus();
            return false;
        }
    }
    return true;
}

JSFIDDLE DEMO: http://jsfiddle.net/softvar/hv6yB/2/

更新:

HTML 

<form onsubmit="return check()">
<div id="div1">
    <label id="name-label" for="full_name">Name</label>
    <input id="full_name" type="text" name="name" tabindex="1" autofocus="1" />
</div>
<div id="div2">
    <label id="email-label" for="email_address">Email</label>
    <input id="email_address" type="email" tabindex="2" name="email" />
</div>
    <input type="submit" value="Submit"/>
</form>
<div id="error" >
<span class="error_message">Please enter your full name</span>
</div>
CSS 

#error {
    color:red;
    display: none;
    border: 1px solid #D9534F;
    background: #FDF7F7;
    width: 80%;
    height: 25px;
    padding: 5px;
}

JS 

function check() {
    var bannedWords = ['bobby','stephen'];
    var name= $('#full_name').val();
    if(name){
        if(name.length>5){
            for(var i=0;i<bannedWords.length;i++) {
                if(bannedWords[i] ==name){
                    $('#error').text('Its a banned word');
                    $('#error').css('display','inline-block');
                    return false;
                }
            }
                alert('form is going to be submitted');
                return true;
        }
        else{
            $('#error').text('Name is shorter');
            $('#error').css('display','inline-block');
            return false;
        }
    }
     $('#error').text('Name cant be blank');
     $('#error').css('display','inline-block');
    return false;
}
相关文章：