JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
實例：1.用戶名的非空驗證代碼如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
</style>
</head>
<body>
<form action="aa.html" method="post"> <!--<form> 中的兩個必要屬性：action,method-->
用戶名<input type="text" name="nn" id="nn" />
<input type="submit" value="登陸" id="b1" onclick= "return yz()" /> <!--onclick屬性添加點擊事件-->
</form>
</body>
<script type="text/javascript">
function yz() //封裝一個<body>中做成點擊事件的函數
{
var nn = document.getElementById("nn"); //通過id名 找到 元素並重新 賦值
if(nn=="" || "null") //判斷條件
{
alert("用戶名不能為空"); //輸出不滿足條件的提示內容
return false;
}
else
{
return true; //滿足條件時將執行表單的action
}
}
</script>
當條件不滿足時輸出結果為：
當滿足條件時，自動跳轉頁面。
實例2：相等驗證，驗證兩次輸入 的內容是否相同。
</head>
<body>
<form action="aa.html" method="post"> <!--<form> 中的兩個必要屬性：action,method-->
用戶名<input type="text" name="nn" id="nn" />
密碼：<input type="text" name="mm" id="mm" />
確認密碼：<input type="text" name="qr" id="qr" />
<input type="submit" value="登陸" id="b1" onclick= "return yz()" /> <!--onclick屬性添加點擊事件-->
</form>
</body>
<script type="text/javascript">
function yz() //封裝一個<body>中做成點擊事件的函數
{
var nn = document.getElementById("nn").value; //通過id名 找到 元素並重新 賦值
var mm = document.getElementById("mm").value;
var qm = document.getElementById("qr").value;
if(nn=="" || null) //判斷條件
{
alert("用戶名不能為空！"); //輸出不滿足條件的提示內容
return false;
}
else if(mm =="" || null)
{
alert("密碼不能為空！");
return false;
}
else if(qr =="" || null)
{
alert("密碼不能為空！");
return false;
}
else if(mm != qr)
{
alert("密碼不一致！"); //兩次輸入密碼不同時的提示內容
return false;
}
else
{
return true; //滿足條件時將執行表單的action
}
}
</script>
若兩次輸入的密碼不同，彈出提示：
小結：有點小邏輯