.非空驗證 ,相等驗證,範圍驗證,正則驗證的實例
阿新 • • 發佈：2017-10-27
doc var public charset 比較 說明 urn elements als
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
</style>
</head>
<body>
1.非空驗證
2.相等驗證
3.範圍驗證
4.正則驗證
定界符 //
開始 ^
結尾 $ /^$/
\轉義
\n \r 換行 \t 制表符 \" 雙引號 \‘單引號
* 前面的表達式可以出現n次
? 出現一次或是零次
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
<form action="denglu.html" method="get">
用戶名:<input type="text" name="yhm" id="yhm" />
密碼：<input type="text" name="mm" id="mm" /> //將所需的文本框及按鈕先定義出來，在本程序中因為想要直觀的看出密碼和確認密碼的框用了文本框而沒有
確認密碼：<input type="text" name="qm" id="qm" /> password框
年齡：<input type="text" name="nianling" id="nianling" />
郵箱：<input type="text" name="youxiang" id="youxiang" />
<input type="submit" value="登錄" id="dl" onclick="return YanZheng()" />
</form>
</body>
<script type="text/javascript">
//alert("\\");
function YanZheng()
{
var yhm = document.getElementById("yhm").value;
var mm = document.getElementById("mm").value;
var qm = document.getElementById("qm").value; // 將各個的框裏的元素get出來以便於為了以後的非空驗證和以及各式驗證等！
var nl = document.getElementById("nianling").value;
var yx = document.getElementById("youxiang").value;
var zz = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(yhm=="")
{
alert("用戶名不能為空！");
return false;
}
else if(mm=="")
{
alert("密碼不能為空！");
return false;
}
else if(qm=="")
{
alert("確認密碼不能為空！");
return false;
}
else if(mm!=qm) //凡是value==""的全部是進行非空驗證，而"mm！=qm"進行的是密碼的相等驗證，"n1<=18||n1>=80
{ "是對年齡進行的範圍驗證，"yx.match(zz)==null" 是對郵箱格式進行的正則驗證！
alert("密碼不一致！");
return false;
}
else if(nl=="")
{
alert("年齡不能為空！");
return false;
}
else if(nl<=18 || nl>=80)
{
alert("年齡不符！");
return false;
}
else if(yx=="")
{
alert("郵箱不能為空！");
return false;
}
else if(yx.match(zz)==null)
{
alert("郵箱格式不正確！");
return false;
}
else
{
return true;
}
}
</script>
</html>
不過當我寫完的時候感覺這個程序的非空驗證用了太多的else if 感覺比較冗雜於是就有了以下 的進階版非空驗證，用了for循環以及另設一個函數來解決代碼冗雜的問題：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{margin:0 auto;}
</style>
</head>
<body>
<div style="width:500px; height:500px; border:1px solid #000;">
<form action="lll.html" method="get" id="F">
<input type="text" name="yhm" class="qb"/>用戶名
<br />
<input type="text" name="mm" class="qb"/>密碼
<br />
<input type="text" name="qrmm"/>確認密碼 //與前文一致不再重復
<br />
<input type="text" name="yx" class="qb"/>郵箱
<br />
<input type="text" name="nl" class="qb"/>年齡
<br />
<input type="submit" value="提交" onclick="return dj()"/>
</form>
</div>
</body>
</html>
<script>
var a=["用戶名不能為空","密碼不能為空","郵箱不能為空","年齡不能為空"];
function dj()
{
var qb=document.getElementsByClassName("qb");
var F=document.getElementById("F");
if(F[1].value!=F[2].value)//密碼的相等驗證
{
alert("密碼不一致!")
return false; //將所有的不能為空的地方的中文說明都放到一個數組內；並且利用for循環以及數組在查詢元素時是利用索引值進行查詢
} 的特性將所有的非空驗證都寫到一個for循環裏。
for(var i=0;i<qb.length;i++)
{
if(qb[i].value=="")
{
alert(a[i]);
return false;
}
}
if(F[4].value<18||F[4].value>50)//年齡的範圍驗證。
{
alert("老了")
return false;
}
}
</script>
.非空驗證 ,相等驗證,範圍驗證,正則驗證的實例