如何使用jQuery制作輸入限制功能

Question

我想使用以下規則在輸入中設置字符和長度限制：

至少十個數字，字母和標點符號的組合（例如！和＆）

如果用戶未完成規則，則輸入值將再次返回為空。

我的問題是我仍然是一個初學者，我當前的代碼無法按我想要的方式工作。 誰能幫我這個忙。

當前輸出： http : //jsfiddle.net/5kcsn/271/

腳本：

$(document).ready(function () {
    $('#example').on('blur', function () {
        $('#example').change(inputVerify);
        inputVerify()
    })
    $('#example').on('keydown', function () {
        $('#example').change(inputVerify);
        inputVerify()
    })
    $('#example').change(inputVerify);

    function inputVerify(value) {
        return /^(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{10,20}$/.test(value) && /[a-z]/.test(value) && /\d/.test(value)

    };

});

Answer 1

我不想告訴您“總體上如何做得更好”，但是如何提供實時反饋而不是還原錯誤的條目呢？ 這樣，用戶可以a）正確無誤后立即查看b）更正先前的輸入：

$("#example").on('keydown',function(){
    if(!inputVerify($("#example").val())){
        $("#example").css("border","1px solid red");
    } else {
        $("#example").css("border","1px solid black");
    }

});

function inputVerify(value){
return /^(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{10,20}$/.test(value)
        && /[a-z]/.test(value) 
        && /\d/.test(value) 

};

Answer 2

您實際上應該僅在模糊時執行此操作，它應類似於以下內容：

$(document).ready(function(){
    $('#example').on('blur', function(){
        if( !inputVerify() ) {
             $(this).val('');   
        }
    });
});    

function inputVerify(value){
    return /^(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{10,20}$/.test(value)
        && /[a-z]/.test(value) 
        && /\d/.test(value) 
};

您會看到，您的inputVerify函數返回true或false ，您將必須通過$(this).val('');刪除輸入$(this).val(''); 。

jsFiddle： http : //jsfiddle.net/5kcsn/272/

請注意，由於我對您的正則表達式不太熟悉，因此我尚未對其進行測試，但是您的正則表達式似乎可以正常工作。

Answer 3

試試這個，注意我沒有檢查你的正則表達式：

$(document).ready(function () {
    $('#example').keydown(inputVerify);

    function inputVerify(event) {
        var value = $(this).val();
        if (!(/^(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{10,20}$/.test(value) 
            && /[a-z]/.test(value) 
            && /\d/.test(value))) {
                $(this).val('');
        }
    };
});

鏈接到JSFiddle

函數inputVerify捕獲由keydown處理程序傳遞的事件，並使用$(this)來引用觸發事件的元素以獲取輸入的值。

然后，如果正則表達式測試失敗，則清空輸入。