实例一
<!DOCTYPE html><html><head><meta charset="utf-8"><title>阿西吧</title></head><head><script>function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必须填写");return false;}}</script></head><body><form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">姓: <input type="text" name="fname"><input type="submit" value="提交"></form></body></html>
实例二（E-mail 验证）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>阿西吧</title></head><head><script>function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){alert("不是一个有效的 e-mail 地址");return false;}}</script></head><body><form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">Email: <input type="text" name="email"><input type="submit" value="提交"></form></body></html>
实例三（checkValidity函数，验证输入是否正确）
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><p>输入数字并点击验证按钮:</p><input id="id1" type="number" min="100" max="300" required><button onclick="myFunction()">验证</button><p>如果输入的数字小于 100 或大于300，会提示错误信息。</p><p id="demo"></p><script>function myFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) {document.getElementById("demo").innerHTML = inpObj.validationMessage;} else {document.getElementById("demo").innerHTML = "输入正确";}}</script></body></html>
约束验证 DOM 属性
Validity 属性
input 元素的validity 属性包含一系列关于 validity 数据属性:
实例四（validity属性判断输入）
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><p>输入数字并点击验证按钮:</p><input id="id1" type="number" min="100" required><button onclick="myFunction()">验证</button><p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p><p id="demo"></p><script>function myFunction() {var txt = "";var inpObj = document.getElementById("id1");if(!isNumeric(inpObj.value)) {txt = "你输入的不是数字";} else if (inpObj.validity.rangeUnderflow) {txt = "输入的值太小了";} else {txt = "输入正确";}document.getElementById("demo").innerHTML = txt;}// 判断输入是否为数字function isNumeric(n) {return !isNaN(parseFloat(n)) && isFinite(n);}</script></body></html>
实例五（setCustomValidity自定义错误信息的使用）
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><script type="text/javascript" src="myjs.js"></script><body><p>输入数字并点击验证按钮:</p><><input id="id1" type="number" min="100" max="300" required><button onclick="myFunction()">验证</button><p>如果输入的数字小于 100 或大于300，会提示错误信息。</p><p id="demo"></p></body></html>
JS
function myFunction() {var inpObj = document.getElementById("id1");inpObj.setCustomValidity(''); // 取消自定义提示的方式if (inpObj.checkValidity() == false) {if(inpObj.value==""){inpObj.setCustomValidity("不能为空！");}else if(inpObj.value<100 || inpObj.value>300){inpObj.setCustomValidity("请重新输入数值（100~300之间）!");}document.getElementById("demo").innerHTML = inpObj.validationMessage;} else {document.getElementById("demo").innerHTML = "输入正确";}}
![php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别【PHP】](https://1200zi.500zi.com/uploadfile/img/14/557/83b875ef1dfb64bd89959610ee7c793b.jpg)
