JavaScript表单验证示例详解
程序员文章站
2022-06-17 23:04:38
html表单（form）通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。但是很可能某些用户可能不会输入您期望的数据。html表单验证可以通过javascript完成。为了避免对服务器资源造...
html表单（form）通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。
但是很可能某些用户可能不会输入您期望的数据。html表单验证可以通过javascript完成。
为了避免对服务器资源造成不必要的压力，您可以使用javascript在客户端（用户系统）上验证表单数据，不正确的信息是不会提交给后台服务器的——这是所谓客户端验证。本文将介绍这种验证
表单验证一般分为两种方式。
客户端验证：直接在客户端执行js进行验证，验证的过程中和服务器端没有任何的交互
服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端
这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速度非常快，用户体验高。不要以为有了客户端的验证就不需要了服务器端的了，客户端的验证是很容易绕过去的，服务器端验证安全性比较高，所以一般验证两个验证都需要写。】
例1、一个简单示例
<!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("姓名必须填写");
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>
保存文件名为：表单验证的例1.html
用浏览器运行测试之，效果如下：
例2、一个复杂点的示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证示例注册用户</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">请输入你的注册信息</div></td>
</tr>
<tr>
<td width="250" ><div align="right" >请输入你的用户名：</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">请输入你的年龄：</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" >请输入你的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>
保存文件名为：表单验证的例1.html
用浏览器运行测试之，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。