Question

我有这个id验证字段，我只需要知道如何进行验证，keydown和keyup函数对克隆输入有效。插入的数据也会转移到重复的字段中。

js fiddle- http://www.jsfiddle.net/dawidvdh/xRh9v/

继承人js：

$(document).ready(function() {
    idAmount = [0,1,2,3,4,5,6,7,8,9,10,12,13];
    var idinc =1;
    var id_val;

    jQuery(idAmount).each(function() {
        var index = "id"+idinc++;
        var id_input = "<input class='id' id="+'"'+index+'"'+" "+" maxlength='1' />";
        id_val = $(this).attr('value');
        jQuery(id_input).appendTo('#id');
    });

    $("#clone").click(function () {
        var clonedObj=$('#id').clone().insertAfter("#id");
        clonedObj.find('.id').each(function(){
           this.id='id' + idinc++;
        });
    });

function Validate() {
    jQuery('#error p').remove();

    var id_val = '';
    $('.id').each(function(){ id_val+=($(this).val());});
    var idNumber = id_val;
    console.log(id_val);
    var correct = true;

    if (idNumber.length != 13 || !isNumber(idNumber)) {
        correct = false;
    }

    var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));
    console.log(tempDate);
    var id_date = tempDate.getDate();
    var id_month = tempDate.getMonth();
    var id_year = tempDate.getFullYear();
    var currentYear = (new Date).getFullYear();
    var age = currentYear - id_year;
    var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year;


    if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
        correct = false;
    }

    // get the gender
    var genderCode = idNumber.substring(6, 10);
    var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";

    // get country ID for citzenship
    var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";

    // apply Luhn formula for check-digits
    var tempTotal = 0;
    var checkSum = 0;
    var multiplier = 1;
    for (var i = 0; i < 13; ++i) {
        tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
        if (tempTotal > 9) {
            tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));
        }
        checkSum = checkSum + tempTotal;
        multiplier = (multiplier % 2 == 0) ? 1 : 2;
    }
    if ((checkSum % 10) != 0) {
        correct = false;
    };

    // if no error found, hide the error message
    if (correct) {
        jQuery('.id').css("border","1px solid #9A8B7D");


        // clear the result div
        jQuery('#result').empty();
        // and put together a result message
        jQuery('#result').append('<p>South African ID Number:   ' + idNumber + '</p><p>Birth Date:   ' + fullDate + '</p><p>Gender:  ' + gender + '</p><p>SA Citizen:  ' + citzenship + '</p><p>AGE:  ' + age + '</p>');
        jQuery('#status').html("correct");
    }
    // otherwise, show the error
    else {
        jQuery('.id').css("border","1px solid #FF0000");
        jQuery('#status').html("incorrect")
    }

    return false;
}

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

$('input.id').keydown(function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         Validate()
    }
});  

$('input.id').on('keyup', function(){
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          Validate()
        }  
    }
});



    $(".id").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

HTML：

<div id="id">
<span id="label">ID NUMBER:</span>
<span id="status"></span>
    </div>
<button id="clone">clone</button>

<div id="result"> </div>

CSS：

#error {
    color: red;
    border: 1px solid red;
    padding: 5px;
    display: none;
}

#result {
    padding: 20px;
}

.id {
    width:16px;
    height:16px;
    border:1px solid #9A8B7D;
    margin:0;
    float:left;
    text-align:center;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    font-size:11pt;
    padding:2px;
}
#label {
    float:left;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    line-height:18px;
    font-size:11pt;
    margin-right:10px;
}

Answer 1

我看到你致电Validate的唯一时间就在这里：

$('input.id').on('keyup', function(){
    //code
});

在这里

$('input.id').keydown(function(e){
    //code
});

这意味着问题是event handler is not delegated to a static element

$(document).on('keyup', 'input.id', function(){
    //code
});

$(document).on('keydown', 'input.id', function(){
    //code
});

将它绑定到文档将确保任何动态创建的元素都具有与同一选择器的任何静态元素一起委托给它们的相同事件。

忘了最后一部分。

clonedObj.find('.id').each(function(){
   this.id='id' + idinc++;
   this.value = ''; //simply add this to remove the value
});

虽然，因为你正在使用jQuery，你应该尝试坚持使用jQuery。

clonedObj.find('.id').each(function(){
     $(this).prop('id', 'id'+ idinc++).val(''); // chain the commands
});

如何使此验证在克隆输入上工作

1 个答案: