Responsive landing page using CSS, HTML, JavaScript

I'm not particularly sure why this regex works:

function validateEmail(email) { var re = /^[a-z][a-zA-Z0-9_.](.[a-zA-Z][a-zA-Z0-9_.])?@[a-z][a-zA-Z-0-9]*.[a-z]+(.[a-z]+)?$/; return re.test(String(email).toLowerCase()); }

And why this one doesn't: function validateEmail (email) { var re = /^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }