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
}

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

Answer 1

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

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

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

Answer 2

如果浏览器不支持HTML5表单验证，则从jQuery验证，请参阅演示 - Jquery validation demo

如何验证旧浏览器中的表单？

2 个答案: