javascript - 根据用户输入动态显示/隐藏标签

Question

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

Answer 1

尝试这个：

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

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);