當前位置：首頁 >

JS 表单、表单验证（表单判断、get、post、submit、validity、checkValidity）

發布時間：2025/3/15 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS 表单、表单验证（表单判断、get、post、submit、validity、checkValidity）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實例一

<!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 輸入值是否合法
validationMessage	瀏覽器錯誤提示信息
willValidate	指定 input 是否需要驗證

Validity 屬性

input 元素的?validity 屬性包含一系列關于 validity 數據屬性:

屬性描述

customError	設置為 true, 如果設置了自定義的 validity 信息。
patternMismatch	設置為 true, 如果元素的值不匹配它的模式屬性。
rangeOverflow	設置為 true, 如果元素的值大于設置的最大值。
rangeUnderflow	設置為 true, 如果元素的值小于它的最小值。
stepMismatch	設置為 true, 如果元素的值不是按照規定的 step 屬性設置。
tooLong	設置為 true, 如果元素的值超過了 maxLength 屬性設置的長度。
typeMismatch	設置為 true, 如果元素的值不是預期相匹配的類型。
valueMissing	設置為 true，如果元素 (required 屬性) 沒有值。
valid	設置為 true，如果元素的值是合法的。

實例四（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 表单、表单验证（表单判断、get、post、submit、validity、checkValidity）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [bzoj4823][洛谷P3756][
下一篇： Springboot之actuator配