1.表单控件提供的checkValidity（）方法进行校验。
例如：如果checkValidity（）方法返回true
则表明该表单内的所有表单控件都有效。
<body> <form action=""> 生日：<input id="birth" name="birth" type="date"><br> 邮件地址： <input type="email" id="email" name="email"><br> <input type="submit" value="提交" onclick="return check()"> </form> <script> var check = function () { return commonCheck('birth', '生日', '字段必须是有效的日期') && commonCheck('email', '邮箱', '字段必须符合电子邮件的格式') } var commonCheck = function (fieid, fieName, tip) { var targetEle = document.getElementById(fieid); if (targetEle.value.trim() == '') { alert(fieName + '字段必须填写'); return false } else if (!targetEle.checkValidity()) { alert(fieName + tip); return false } return true } </script> </body>
2.自定义验证 应用h5新增的setCustomValidity（）方法实现。只有当该表单没有通过校验时才能调用该方法。
例如：
<body> <form action=""> 图书名：<input id="name" name="name" type="text" required><br> 图书ISBN：<input type="text" id="isbn" name="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}" ><br> 图书价格：<input type="number" id="price" name="price" required min="20" max="150" step="5" ><br> <input type="submit" value="提交" onclick="check()"> </form> <script> var check = function () { if(!document.getElementById('name').checkValidity()){ document.getElementById('name').setCustomValidity('图书名是必须的'); } if(!document.getElementById('isbn').checkValidity()){ document.getElementById('isbn').setCustomValidity('图书isbn是必须的'+'\n而且必须符合xxx-x-xxx-xxxxx的格式（其中x代表数字）'); } if(!document.getElementById('price').checkValidity()){ document.getElementById('price').setCustomValidity('价格是必须的'+'\n而且必须在20-150之间，且是5的倍数'); } } </script>