基于用户输入动态显示/隐藏标签

Question

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

我想知道如何将标签字段添加到文本字段的底部，根据用户输入的不同，打印无效或有效的标签字段，我如何实现这个想法？

HTML：

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

联署材料：

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('');
});

Answer 1

试试这个：

1. 输入，比如说div
2. 更新javascript $(“.fname”).keyup(函数(e) { var $test = $(this)；$test.parent().find(‘div’).remove()；//删除错误元素，如果(isfname($test.val(){$test.css(“背景颜色”，"rgb(140,202,165)")；$test.css(“颜色”，“白色”)；}$test.parent{$test.css(“背景颜色”，"rgb(198，95，88)")；$test.css(“颜色”，“白色”)；$test.parent().append(‘无效名称’)；//创建错误元素}).blur(函数(e) {$(This).css(“背景颜色”，"")；$(此).css(“颜色”，"#4A4F4B")；}.focus(函数(e) {$(This).css(“背景颜色”，"")；$(This).css(“文本-转换”，“大写”)；if (！isfname($(This).val()) $(this).val('')；})；

Answer 2

小提琴

首先，我们可以使用一些语义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();   
        }
    });
};

以这种方式创建验证器是灵活的。这里有一个简单的“一个词”检查我们的名字。

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

然后，我们与HTML的绑定要简单得多。

$('#fname').blur(validate.first).keyup(validate.first);