快捷導(dǎo)航

JavaScript實(shí)現(xiàn)表單驗(yàn)證示例

更新時(shí)間：2022年06月19日 07:19:34 作者：軟件開發(fā)技術(shù)愛(ài)好者

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表單驗(yàn)證示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

HTML表單（form）通常用于收集用戶信息，例如姓名，電子郵件地址，位置，年齡等。

但是很可能某些用戶可能不會(huì)輸入您期望的數(shù)據(jù)。HTML表單驗(yàn)證可以通過(guò)JavaScript完成。

為了避免對(duì)服務(wù)器資源造成不必要的壓力，您可以使用JavaScript在客戶端（用戶系統(tǒng)）上驗(yàn)證表單數(shù)據(jù)，不正確的信息是不會(huì)提交給后臺(tái)服務(wù)器的——這是所謂客戶端驗(yàn)證。本文將介紹這種驗(yàn)證

【表單驗(yàn)證一般分為兩種方式。

客戶端驗(yàn)證：直接在客戶端執(zhí)行JS進(jìn)行驗(yàn)證，驗(yàn)證的過(guò)程中和服務(wù)器端沒(méi)有任何的交互

服務(wù)器端驗(yàn)證：頁(yè)面將驗(yàn)證信息傳回服務(wù)器端，服務(wù)器端進(jìn)行驗(yàn)證，并將驗(yàn)證的結(jié)果發(fā)送回客戶端

這兩個(gè)驗(yàn)證都是必須的，因?yàn)榭蛻舳说尿?yàn)證安全性不是太高，但是可以防止80%以上的用戶的誤操作，可以減輕服務(wù)器端的壓力，而且速度非常快，用戶體驗(yàn)高。不要以為有了客戶端的驗(yàn)證就不需要了服務(wù)器端的了，客戶端的驗(yàn)證是很容易繞過(guò)去的，服務(wù)器端驗(yàn)證安全性比較高，所以一般驗(yàn)證兩個(gè)驗(yàn)證都需要寫?！?/p>

例1、一個(gè)簡(jiǎn)單示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗(yàn)證簡(jiǎn)單示例</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
? //alert("姓名必須填寫");
? usernameerror.innerHTML="<font color='red'>姓名必須填寫</font>";
? return false;
? }
else{
? usernameerror.innerHTML="正確";
? return true;
? } ?
?
}
</script>
</head>
<body>
<!--?? ?
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
-->
<form name="myForm" onsubmit="return validateForm()" >
姓名: <input type="text" name="fname" id="username">
<span id="usernameerror"></span>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
?? ?
</body>
</html>

保存文件名為：表單驗(yàn)證的例1.html

用瀏覽器運(yùn)行測(cè)試之，效果如下：

例2、一個(gè)復(fù)雜點(diǎn)的示例

<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>表單驗(yàn)證示例注冊(cè)用戶</title>
??
? <style type="text/css">
? </style>
?
? <script>
? ? function checkusername()
? ? {
? ? ? var myform = document.getElementById("form1");
? ? ? var username = myform.username.value.length;
? ? ? if(username < 1||username>12)
? ? ? {
? ? ? ? errusername.innerHTML = "<font color='red'>用戶名不符合要求</font>";
? ? ? ? return false;
? ? ? }else{
? ? ? ? errusername.innerHTML = "<font color='green'>用戶名符合要求</font>";
? ? ? ? return true;
? ? ? }
? ? }
? ? function checkage()
? ? {
? ? ? var myform = document.getElementById("form1");
? ? ? var age = myform.age.value;
? ? ? if(age != parseInt(age))
? ? ? {
? ? ? ? errage.innerHTML = "<font color='red'>年齡不符合要求</font>";
? ? ? ? return false;
? ? ? }else{
? ? ? ? errage.innerHTML = "<font color='green'>年齡符合要求</font>";
? ? ? ? return true;
? ? ? }
? ? }
? ? function checkemail()
? ? {
? ? ? var myform = document.getElementById("form1");
? ? ? var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
? ? ? if(!mail.test(myform.email.value))
? ? ? { ?
? ? ? ? erremail.innerHTML = "<font color='red'>email不符合要求</font>";
? ? ? ? return false;
? ? ? }else{
? ? ? ? erremail.innerHTML = "<font color='green'>email符合要求</font>";
? ? ? ? return true;
? ? ? }
? ? }
? ? function checkform()
? ? {
? ? ? checkusername();checkage();checkemail();
? ? ? if(checkusername()&&checkage()&&checkemail())
? ? ? {
? ? ? ? return true; ?
? ? ? }else{
? ? ? ? return false;
? ? ? }
? ? }
? </script>
</head>
?
<body>
<!--
?<form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
-->
?
?<form id="form1" name="form1" method="post" onsubmit="return checkform()">
<table width="777" border="0" cellpadding="1" cellspacing="1">
?<tr>
? <td colspan="3" ><div align="center">請(qǐng)輸入你的注冊(cè)信息</div></td>
?</tr>
?<tr>
? <td width="250" ><div align="right" >請(qǐng)輸入你的用戶名：</div></td>
? <td width="250"><div align="center">
? ? ?<input type="text" name="username" onblur="checkusername()" /> ?
? ?</div></td>
? <td><div id="errusername" align="center"></div></td>
?</tr>
?<tr>
? <td width="250"><div align="right">請(qǐng)輸入你的年齡：</div></td>
? <td width="250"><div align="center" >
? ?<label>
? ?<input type="text" name="age" onblur="checkage()"/>
? ?</label>
? </div></td>
? ?<td><div align="center" id="errage"></div></td>
?</tr>
?<tr>
? <td width="250"><div align="right" >請(qǐng)輸入你的EMAIL:</div></td>
? <td width="250"><div align="center" >
? ?<label>
? ?<input type="text" name="email" onblur="checkemail()" />
? ?</label>
? </div></td>
? ?<td><div align="center" id="erremail"></div></td>
?</tr>
?<tr>
? <td><div align="right">
? ?<label>
? ?<input type="submit" name="Submit" value="提交" />
? ?</label>
? </div></td>
? ?<td><div align="center">
? ? <label>
? ? <input type="reset" name="Submit2" value="重置" />
? ? </label>
? ?</div></td>
? <td><div align="center"></div></td>
?</tr>
</table>
?
</form>
?
</body>
</html>

保存文件名為：表單驗(yàn)證的例1.html

用瀏覽器運(yùn)行測(cè)試之，效果如下：