Entrada de fecha Formato automático y evitar caracteres alfabéticos - jquery, html5

Tengo un requisito para un formulario html con dospartes diferentes. La primera es que un usuario ingrese su fecha de nacimiento en una entrada que agregará automáticamente barras diagonales a medida que escribe y evitará que ingresen caracteres alfabéticos al mismo tiempo. He podido resolver el requisito de formato automático. Para resolver la segunda parte, he estado investigando expresiones regulares, pero puedo encontrar cualquier cosa que no rompa el formato automático al mismo tiempo. Aquí está mi código html:

<label for="date_of_birth">Date of Birth </label>
<input type="text"  name="dob" placeholder="MM/DD/YYYY" id="dob" pattern="^\s*($1)\W*($2)?\W*($3)?([0-9]*).*" maxlength="10" class="validate"/>

Y aquí está la jQuery:

var format = "mm/dd/yyyy";
var match = new RegExp(format
.replace(/(w+)W(w+)W(w+)/, "^\s*($1)\W*($2)?\W*($3)?([0-9]*).*")
.replace(/m|d|y/g, "\d"));
var replace = "$1/$2/$3$4"
.replace(///g, format.match(/W/));

function doFormat(target)
{
target.value = target.value
.replace(/(^|W)(?=dW)/g, "$10")   // padding
.replace(match, replace)             // fields
.replace(/(W)+/g, "$1");            // remove repeats
}

$("input[name="dob"]:first").keyup(function(e) {
if(!e.ctrlKey && !e.metaKey && (e.keyCode == 32 || e.keyCode > 46))
doFormat(e.target)
});

Aquí hay un violín: https://jsfiddle.net/4r15f951/2/

Respuestas

Primero, puedes hacerlo usando la función de enmascaramiento de jquery.

Necesita eliminar su patrón de la entrada html y la función no es necesaria. En su lugar puedes usar

<label for="date_of_birth">Date of Birth </label>
<input type="text"  name="dob" placeholder="MM/DD/YYYY" id="dob"  maxlength="10" class="validate"/>

Jquery

$(".validate").mask("99/99/9999");
$(".validate").change(function(){

if($(this).val().substring(0,2) > 12 || $(this).val().substring(0,2) == "00") {
alert("Iregular Month Format");
return false;
}
if($(this).val().substring(3,5) > 31 || $(this).val().substring(0,2) == "00") {
alert("Iregular Date Format");
return false;
}
});

Añade esto a tu guión https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js

Las barras diagonales de OnKeypress aparecen automáticamente y la entrada de alfabetos está restringida.

Aquí está mi jsfiddle: https://jsfiddle.net/0rw8rddf/