javascript基礎 之 表單
阿新 • • 發佈：2018-10-19
submit innerhtml ssa 布爾 col mit 流程 ESS name
1，js可以驗證表單
實例1，js獲取表單的內容
//html表單是這樣的 <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> //js驗證表單的程序 function validateForm() { var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") { alert("需要輸入名字。"); return false; } } //註意這個表單返回的是布爾值，而html表單裏的onsubmit是“return false”或者“return true”
//其實道理很簡單，但是格式需要記住：表單信息獲取是document.forms[‘表單名‘][‘表單下的元素名‘].value 其實有點像python裏的raw_input
實例2：驗證文本框裏是否輸入了1-10之間的數字（和表單還是有些不同）
<body> <h1>JavaScript 驗證輸入</h1> <p>請輸入 1 到 10 之間的數字：</p> <input id="numb"> <button type="button" onclick="myFunction()">提交</button> <p id="demo"></p> <script> functionmyFunction() { var x, text; // 獲取 id="numb" 的值 x = document.getElementById("numb").value; // 如果輸入的值 x 不是數字或者小於 1 或者大於 10，則提示錯誤 Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "輸入錯誤"; } else { text = "輸入正確"; } document.getElementById("demo").innerHTML = text; } </script>
實例3，表單自動驗證，內容是屬於js的範圍，但是書寫形式不是直接敲代碼，而是把HTML和js融合了
<html> <head> <meta charset="utf-8"> </head> <body> <form action="demo_form.php" method="post"> //老子是表單，提交的時候會把信息傳給action指定的文件，方法按照post來 <input type="text" name="fname" required="required"> //意思：我是一個文本框，名字是fname（用於接收端定位信息），以定要有信息才能被提交。 <input type="submit" value="提交"> </form> <p>點擊提交按鈕，如果輸入框是空的，瀏覽器會提示錯誤信息。</p> </body> </html>
2，約束驗證（dom屬性）
1，必填項目驗證
</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> //運行流程：點擊提交->執行函數驗證->文本框為空的話函數會提示並且返回false->onsubmit會return false，阻止提交
2，數據格式驗證，比如電子郵箱驗證
思想上和上面的差不多，函數內部可以用js的正則表達式匹配：教程：https://www.jb51.net/article/126866.htm
3,dom驗證方法，如下
<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) { //查看一下inpObj的屬性是否合法 document.getElementById("demo").innerHTML = inpObj.validationMessage; //瀏覽器提示的錯誤信息 } else { document.getElementById("demo").innerHTML = "輸入正確"; } } </script> </body>
checkValidity()：如果 input 元素中的數據是合法的返回 true，否則返回 false。
setCustomValidity()：設置 input 元素的 validationMessage 屬性，用於自定義錯誤提示信息的方法。
javascript基礎 之 表單