javascript - 车牌格式化和验证

Question

我遇到了停电...我不知道如何将 javascript 应用到文本区域... 还;什么是最好的？使用 onfocus、onblur 或 onclick 加载它？

我有一个这样的文本区域:

<input type="text" name="c_Kenteken" id="invoerKenteken" class="zoek_kentekenplaat" />

还有这个脚本:

<script language="javascript" type="text/javascript">
function GetSidecodeLicenseplate(Licenseplate){

var arrSC = new Array;
var scUitz = '';

Licenseplate = Licenseplate.replace('-', '').toUpperCase();

arrSC[0] = /^[a-zA-Z]{2}[\d]{2}[\d]{2}$/         //   1       XX-99-99
arrSC[1] = /^[\d]{2}[\d]{2}[a-zA-Z]{2}$/         //   2       99-99-XX
arrSC[2] = /^[\d]{2}[a-zA-Z]{2}[\d]{2}$/         //   3       99-XX-99
arrSC[3] = /^[a-zA-Z]{2}[\d]{2}[a-zA-Z]{2}$/     //   4       XX-99-XX
arrSC[4] = /^[a-zA-Z]{2}[a-zA-Z]{2}[\d]{2}$/     //   5       XX-XX-99
arrSC[5] = /^[\d]{2}[a-zA-Z]{2}[a-zA-Z]{2}$/     //   6       99-XX-XX
arrSC[6] = /^[\d]{2}[a-zA-Z]{3}[\d]{1}$/         //   7       99-XXX-9
arrSC[7] = /^[\d]{1}[a-zA-Z]{3}[\d]{2}$/         //   8       9-XXX-99
arrSC[8] = /^[a-zA-Z]{2}[\d]{3}[a-zA-Z]{1}$/     //   9       XX-999-X
arrSC[9] = /^[a-zA-Z]{1}[\d]{3}[a-zA-Z]{2}$/     //   10      X-999-XX

//except licenseplates for diplomats
scUitz = '^CD[ABFJNST][0-9]{1,3}$'              //for example: CDB1 of CDJ45

for(i=0;i<arrSC.length;i++){
    if (Licenseplate.match(arrSC[i])) {
        return i+1;
    }
}
if (Licenseplate.match(scUitz)) {
    return 'CD';
}
return false;
}

function FormatLicenseplate(Licenseplate,Sidecode) {

Licenseplate = Licenseplate.replace('-', '').toUpperCase();

if (Sidecode <= 6) {
        return Licenseplate.substr(0, 2) + '-' + Licenseplate.substr(2, 2) + '-' + Licenseplate.substr(4, 2)
}
if (Sidecode == 7 || Sidecode == 9) {
        return Licenseplate.substr(0, 2) + '-' + Licenseplate.substr(2, 3) + '-' + Licenseplate.substr(5, 1)
}
if (Sidecode == 8 || Sidecode == 10) {
        return Licenseplate.substr(0, 1) + '-' + Licenseplate.substr(1, 3) + '-' + Licenseplate.substr(4, 2)
}
return Licenseplate
}
</script>

CSS:

    input.zoek_kentekenplaat
{
    border:none;
    border-color:#F0F0F0;
    font-size: 18px;
    font-weight: bold;
    line-height: 0px;
    width: 125px;
    height: 30px; /*background-color: #f4be04;*/
    padding-left: 20px; /*border: 1px solid #ffcc00;*/
    padding-bottom: 0px;
    padding-top: 0px;
    text-transform: uppercase;
    /*margin-left: 10px;*/
    margin-top: 2px;
    background: url(http://email.allianz.nl/public/ANG/278b2c33c92f75d6795b0c75e3a18e21/kenteken_125_2_2.jpg) no-repeat; 
    /*margin-bottom: 21px;*/
}

这是 JSFIDDLE:http://jsfiddle.net/jazperader/676sD/

我有一种明显的感觉，那就是它只是一些微小而愚蠢的东西。 我知道文本区域 HTML 中没有 onfocus、onblur 或 onclick。

我想听听您对此的专家意见 ;-) 谢谢!

贾斯珀

Answer 1

您尝试执行的操作很常见，但是会带来一些性能问题。由于理想情况下您希望在他们键入时应用格式，您可以做的是使用 keydown 或 keyup 事件，例如:

<input type="text" onkeyup="myFunction()">

同样，每次用户键入并将手指从键上移开时，都会触发。因此，您可能会造成性能问题，因为该事件会频繁触发。在您的情况下，这可能没什么大不了的，因为您只处理少量文本，因此事件可能只会触发 10 次左右。

如果您确实想稍微优化一下代码，请查看此 http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/您将看到一个示例，说明如何限制您的事件，以便您的代码不会每次都执行。