0

http://jsfiddle.net/ZKsjr/20/

ユーザー入力に応じて無効または有効なラベル フィールドをテキスト フィールドの下部に追加する方法を知りたいのですが、このアイデアをどのように実装できますか?

HTML:

<input type="text" class="fname" maxlength="255" size="8" value="First Name" required/>

JS:

function isfname(text) {
    var reg = /^[a-z ,.'-]+$/i;
    return reg.test(text); }

$(".fname").keyup(function (e) {
    var $test = $(this);
    if (isfname($test.val())) {
        $test.css("background-color", "rgb(140, 202, 165)");
        $test.css("color", "white");
    } else {
        $test.css("background-color", "rgb(198, 95, 88)");
        $test.css("color", "white");
    }
}).blur(function (e) {
    $(this).css("background-color", "");
    $(this).css("color", "#4A4F4B");
    if (!isfname($(this).val()))
        $(this).val('First Name');
}).focus(function (e) {
    $(this).css("background-color", "");
    $(this).css("text-transform", "capitalize");
    if (!isfname($(this).val()))
        $(this).val('');
});
4

2 に答える 2

0

これを試して：

  1. 入力を入れて、divとしましょう

    <div>
   <input type="text"  class="fname" maxlength="255" size="8" " value="First Name" required/>
</div>

  2. JavaScript を更新する

    $(".fname").keyup(function (e) {
var $test = $(this);
$test.parent().find('div').remove();//remove error element before validation
if (isfname($test.val())) {
    $test.css("background-color", "rgb(140, 202, 165)");
    $test.css("color", "white");

} else {
    $test.css("background-color", "rgb(198, 95, 88)");

    $test.css("color", "white");
    $test.parent().append('<div>Invalid name !</div>');//create error element
}
}).blur(function (e) {
$(this).css("background-color", "");
$(this).css("color", "#4A4F4B");

if (!isfname($(this).val()))
    $(this).val('First Name');
}).focus(function (e) {
$(this).css("background-color", "");
$(this).css("text-transform", "capitalize");

if (!isfname($(this).val()))

    $(this).val('');

});
于 2013-07-28T10:01:37.143 に答える
0

フィドル

まず、セマンティック HTML を使用して要素をより適切に記述できます。

<input type="text" id="fname" maxlength="255" size="8" 
       placeholder="First Name" required />
<label for="fname">First name is required</label>

次に、検証を支援する Validator 関数を定義できます。

function Validate(expression){
    return (function(){
        var $el = $(this),
            $label = $("label[for='"+$el.attr('id')+"']"),
            val = $el.val();

        if (expression.test(val)) {
            $label.fadeOut();
        }
        else {
            $label.fadeIn();   
        }
    });
};

この方法でのバリデータの作成は柔軟です。これは、名前の簡単な「1 単語」チェックです。

validate = {
    first: Validate(/[a-z]+/i)
};

これで、HTML へのバインディングがはるかに簡単になります。

$('#fname').blur(validate.first).keyup(validate.first);
于 2013-07-28T09:54:24.537 に答える