javascript - 如何在旧浏览器中验证表单？

Question

我需要一种在新旧浏览器中验证表单的方法。

这是我的代码:

<form name="myForm">
    <input type="text" name="contactname" placeholder="Name" required>
    <input type="email" name="contactemail" placeholder="Email" required>  
    <input type="number" name="contactphone" placeholder="Phone Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>  
    <button type="submit">SEND</button>
</form>

此代码在支持 HTML5 的浏览器中运行良好，但在 Internet Explorer 8 等旧浏览器中不起作用。所以我尝试在提交按钮中添加 onclick="validateform()" :

function validateform() {
    // Support for old browsers
    var x = document.forms["myForm"]["contactname"].value;
    // if z is filled

    var y = document.forms["myForm"]["contactemail"].value;
    // if y is an email and it is filled

    var z = document.forms["myForm"]["contactphone"].value;
    // if z is a number
}

但是在新的浏览器中它会验证两次，这很烦人。那么实现支持旧浏览器的验证的正确方法是什么？

Answer 1

检查浏览器是否支持 HTML5 表单验证，然后进行验证:

typeof document.forms["myForm"]["contactname"].checkValidity == 'function'

如果为 true 则无需验证(浏览器支持验证)，否则验证。