<!DOCTYPE html>
向后兼容的HTML5<doctype>标签。HTML5规范规定<doctype>对大小写不敏感；然而，之前版本的HTML需要<doctype>全部大写。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> :invalid { border-color: #DB729C; } :required { border-color: #1BE032; } </style> </head> <body> <form id="myForm" name="myForm"> <input type="text" autocomplete="on" autofocus required placeholder="占位文字" pattern="[0-9]{5}"> <input type="text" list="animals"> <input type="number" name="quantity" min="1" max="5" value="11" onchange="console.log(this.value)" oninput="updateMessage(this)" oninvalid="console.log('fail')"> <datalist id="animals"> <option value="Dog"> <option value="Dolphin"> <option value="Duck"> <option value="Cat"> <option value="Bird"> <option value="mouse"> </datalist> <input type="email" oninput="updateMessage(this)"> <button type="submit" formnovalidate>submit</button> <button type="submit">submit</button> </form> <form id="myForm2" novalidate> <input type="email" id="email" data-myvalue="eee"> </form> <input type="submit" value="submit" form="myForm2"> <script> if (document.myForm.checkValidity() === false) { console.log('fail') } document.myForm.quantity.setCustomValidity('looks like your numbers ... between one and five') function updateMessage(input) { if (input.value >=1 && input.value <= 5) { input.setCustomValidity('') // 不清掉会一直提示 } } console.log(document.getElementById('email').dataset.myvalue) console.log(document.getElementById('email').getAttribute('data-myvalue')) </script> </body> </html>