javascript实现的简单的表单验证

表单验证几乎是不可缺少的，有的表单验证是在后台完成的，有的则是使用JavaScript在在前端完成基本的验证，这样可以有效的减轻服务器的压力，下面就介绍一下JS实现的最简单的表单验证。代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>我们</title>
<script type="text/javascript">
function chkform(){
 if(document.getElementById("username").value==""){
  alert("用户名不能为空！");
  return false;
 }
 if(document.getElementById("pw").value=="") {
  alert("密码不能为空！");
  return false;
 }
}
</script>
</head>
<body>
<form action="" name="myform">
 <table>
  <tr>
   <td>用户名:</td>
   <td><input type="text" name="username" id="username" /></td>
  </tr>
  <tr>
   <td>密码:</td>
   <td><input type="password" name="pw" id="pw" /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="提交"></td>
  </tr>
 </table>
</form>
</body>
</html>

以上代码实现了最基本的表单验证，那就是不允许表单内容为空，下面就简单介绍一下它的实现过程:

一.在JavaScript代码中，创建chkform()函数用来验证表单，下面就简单介绍一下次函数:

document.getElementById("username").value

以上代码可以获得id为username的对象的值，然后通过if语句判断此值是否为空，如果为空则return false，这个语句非常重要，否则即使表单内容为空，表单也会被提交，也就达不到验证效果，第二个if判断语句的作用也是如此，这里就不介绍了。

二.onclick="return chkform()"，此语句的作用是当点击提交按钮的时候就会执行chkform()函数用来验证表单，这里特别强调一点不要忘记添加return。

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JavaScript 基础表单验证示例(纯Js实现)

    JavaScript 基础表单验证示例(纯Js实现)

    验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo

  • JavaScript表单验证完美代码

    JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q

  • javascript表单验证大全

    被 JavaScript 验证的这些典型的表单数据有以下几种: 1.用户是否已填写表单中的必填项目? 2.用户输入的邮件地址是否合法? 3.用户是否已输入合法的日期? 4.用户是否在数据域 (numeric field) 中输入了文本? 下面是用户名和密码验证代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &

  • JavaScript表单验证的两种实现方法

    本文实例为大家分享了js表单验证的实现方法,供大家参考,具体内容如下 第一种:js表单验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册-个人用户</title> <meta http-equiv="pragma" content="no-cache"

  • 纯JS实现表单验证实例

    纯JS实现表单验证实例

    表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check

  • javascript实现的简单的表单验证

    表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <script type="text/javascript

  • jquery实现简单的表单验证

    jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路. 大概思路: 先为每一个required添加必填的标记,用each()方法来实现. 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面. 这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素. 然后为input元素添加失去焦点事件.然后进行用户名.邮件的验证. 这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证. 在jQ

  • jQuery之简单的表单验证实例

    html部分: <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个需要的元素添加required --> <input type="text" id="username&qu

  • jquery实现一个简单的表单验证实例

    表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

  • Struts2中Action三种接收参数形式与简单的表单验证功能

    有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的Action接收参数的形式,直接在我们的Action类中添加成员变量,这样就可以完成Action接收参数的操作,具体内容详见代码展示: 这里我们以登录验证为例,进行代码展示,首先是我们的Action类: /*** * 最基本的接收参数形式 * @author jho * http://localhos

  • JavaScript实现仿网易通行证表单验证

    JavaScript实现仿网易通行证表单验证

    介绍一下表单验证,不错哦: 如图 CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:url(../images/register_bg.gif); background-repeat:no-repeat; width:6px;

  • javascript Zifa FormValid 0.1表单验证 代码打包下载

    简介:完全通过html不需要写js程序就可以实现表单验证功能,可支持一个表单元件多条件验证  和服务端程序无关系,完全客户端方式. 使用方法:在要验证的表单中加上 onsubmit="return validator(this)"  在要验证的表单元件中设置,valid(验证规则),errmsg(提示消息),多个验证使用|全为分隔! 验证规则参数: 复制代码 代码如下: required 必填   isEmail 必须是Email格式   eqaul 和另一元件对比值是否相同,对比的元

  • 利用策略模式与装饰模式扩展JavaScript表单验证功能

    利用策略模式与装饰模式扩展JavaScript表单验证功能

    简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe

  • JavaScript表单验证实例之验证表单项是否为空

    表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

随机推荐