jQuery的幫助 - 驗證

我想創建一個表單，允許用戶輸入值，訂單的形式。加載表單時，需要突出顯示所有沒有任何內容的行，或者值超過100的行，然後在糾正時忽略它們。jQuery的幫助 - 驗證

此外，還有一個提交按鈕 - 這需要在任何的文本框突出

這是我到目前爲止的代碼被禁用 - 沒有任何人有什麼想法？

$(':text').focusin(function() { 
    var inp = $(this).val(); 
    if (inp > 100) { 
     $(this).css('background-color', 'red'); 
    } 
    if (inp.length < 1) { 
     $(this).css('background-color', 'red'); 
    } 
    if (inp.length > 0 && inp <= 100) { 
     $(this).css('background-color', 'white'); 
    } 
}); 

$(':text').change(function() { 
    var inp = $(this).val(); 
    if (inp > 100) { 
     $(this).css('background-color', 'red'); 
    } 
    if (inp.length < 1) { 
     $(this).css('background-color', 'red'); 
    } 
    if (inp.length > 0 && inp <= 100) { 
     $(this).css('background-color', 'white'); 
    } 
});

來源

2013-01-12 Henry Pye

那麼，有什麼不工作？這和PHP有什麼關係？ – ernie

它工作正常，但我只是想知道是否有可能讓他們預先突出顯示時，窗體加載而且也有一個提交按鈕被禁用，如果他們仍然高亮我想我加了PHP標籤意外 - 我的壞！對不起 –

我覺得這個做的伎倆很好，http://jsfiddle.net/fr85u/

HTML

<form> 
    <input /> 
    <input value="101"/> 
    <input value="99"/> 
    <button disabled="disabled"> submit </button> 
</form>

$('input').each(function(){ 
    var $this = $(this), 
     val = $this.val(); 

    if(val > 100 || val === ''){ 
    $this.addClass('red'); 
    } 
}).on('blur', function(){ 
    var $this = $(this), 
     val = $this.val(); 

    $this.toggleClass('red', val === '' || val > 100); 

    $('button').prop('disabled', $("input.red").length > 0); 
});

CSS

.red{ 
    background-color: red; 
}

來源

2013-01-12 00:29:31 joeltine

您沒有任何可重新啓用按鈕的代碼。。。 – ernie

雅，我是。當輸入模糊時，該按鈕將被禁用或基於這個表達式'$（「input.red」）的結果啓用。length> 0' – joeltine

啊，我的錯誤，誤讀你的prop（）函數。 – ernie

我向你推薦的方法是在你改變元素的時候向元素添加一個類（即'red_bg'）。這可以讓您輕鬆確定何時啓用提交按鈕（即$('.red_bg').length == 0）。

像這樣的東西應該做的：

function validateField(jqSelector) { 
    var inp = jqSelector.val(); 
    var regex = new RegExp(/^\d+$/); 
    if (regex.test(inp) && parseInt(inp) <= 100) { 
     $(this).removeClass('red_bg'); 
    } else { 
     $(this).addClass('red_bg') 
    } 
    setSubmit(); 
} 

function setSubmit() { 
    $('.red_bg').length == 0) { 
     $('#submit_id').removeAttr('disabled'); 
    } else { 
     $('#submit_id').attr('disabled', 'disabled'); 
    } 
} 


$(function() { 
    $(':text').focusin(function() { 
     validateField($(this)); 
    }).change(function() { 
     validateField($(this)); 
    }).each(function() { 
     validateField($(this)); 
    }); 
});

請注意，你可能會考慮在深度驗證使用更因爲我已經使用正則表達式作爲現在所示，你在做什麼，以驗證所輸入的值是數字。

來源

2013-01-12 00:28:15

這假定默認背景顏色是白色，如果不是，則需要明確更改else子句以設置白色背景（或將類切換爲白色背景類）。這個答案的真正需要注意的是，通用代碼是如何被模塊化成可重用函數的，以及觸發器如何鏈接在一起。 – ernie

@ernie好評。 –

已更新爲包含正則表達式以測試輸入中輸入的所有數字，並在輸入字符串上執行正確的'parseInt'。 –

因爲你的事件處理函數做電子商務Xactly公司一樣，你可以重寫你的代碼

function test() { 
    var inp = $(this).val(); 
    if (inp > 100) { 
     $(this).css('background-color', 'red'); 
    } 
    if (inp.length < 1) { 
     $(this).css('background-color', 'red'); 
    } 
    if (inp.length > 0 && inp <= 100) { 
     $(this).css('background-color', 'white'); 
    } 
}; 

$(':text').focusin(test).change(test); 
test();

倒數第二行重視的事件處理程序這兩個事件，最後一行執行高亮功能的第一次。

來源

2013-01-12 00:29:39 snwflk

jQuery的幫助 - 驗證

回答

相關問題