Los DNI españoles pueden ser:

 * NIF - 8 numeros y una letra<sup>1</sup>
 * NIE - 1 letra<sup>2</sup>, 7 numeros y 1 letra<sup>1</sup>

<sub> 1 -  Una de las siguientes: TRWAGMYFPDXBNJZSQVHLCKE</sub>  
<sub> 2 - Una de las siguientes: XYZ</sub>

Por tanto tu [tag:regex] ha de ser una comprobacion doble:

    var nifRegex = /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKE]$/i;
    var nieRegex = /^[XYZ][0-9]{7}[TRWAGMYFPDXBNJZSQVHLCKE]$/i;

Quedando:

    return this.optional(element) || ( nifRegex.test(value) || nieRegex.test(value) );

Ejemplo:

<!-- begin snippet: js hide: trueconsole: true babel: false -->

<!-- language: lang-js -->


    function comprobar() {
      var elem = document.getElementById("prueba");


        var nifRegex = /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKE]$/i;
        var nieRegex = /^[XYZ][0-9]{7}[TRWAGMYFPDXBNJZSQVHLCKE]$/i;

      if (nifRegex.test(elem.value.trim())|| nieRegex.test(elem.value.trim())|| elem.value.trim() == "") {

        elem.style.borderBottomColor = elem.style.borderTopColor;

        return true;
      } else {

        elem.style.borderBottomColor = "red"

        return false;

      }


    }

    $('input').bind('input propertychange', function() {
      comprobar();
    });


        

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Pasaporte: <input type="text" id="prueba">

    <p id="resultado"></p>

<!-- end snippet -->