JavaScript实现表单验证示例
更新时间：2022年06月19日 07:19:34 作者：软件开发技术爱好者
这篇文章主要为大家详细介绍了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
用浏览器运行测试之，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
使用typeof方法，typeof 返回的是字符串,其中就有一个是undefined，下面是示例代码，大家可以看看2014-09-09
在前端程序开发中，经常会实现js轮播图的效果，怎么实现的呢？下面小编给大家分享基于基于JavaScript实现轮播图代码 ，非常不错，感兴趣的朋友可以参考下2016-07-07
本篇文章主要介绍了Bootstrap笔记—折叠实例代码，详细的介绍了折叠效果实例，包括一组多组等，非常具有实用价值，需要的朋友可以参考下。2017-03-03
这篇文章主要为大家详细介绍了原生js实现九宫格拖拽换位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
下面小编就为大家带来一篇关于Promise 异步编程的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了基于js实现数组相邻元素上移下移,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JS实现的简单表单验证功能,结合完整实例形式分析了javascript基于字符串长度判定、数据类型判定及正则判断等操作进行表单验证的相关实现技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了JS实现双击屏幕滚动效果代码,涉及JavaScript鼠标事件的响应及页面元素属性的动态变换技巧,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JavaScript将字符串转换成字符编码列表的方法,实例分析了javascript中charCodeAt函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JSON stringify方法原理及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论