简单的JS表单验证效果代码

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.com/" />
<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="http://www.51texiao.cn" 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。

时间: 07-09

简单的JS表单验证效果代码的相关文章

简单的js表单验证框架

/** * 通常在我们的HTML页面表单中有大量的数据验证工作, * 免不了要写很多验证表单的js代码,这是一项非常繁琐 * 枯燥的工作.很多程序员也会经常遗漏这项工作.当然 * 一些JavaEE框架中有一些比较好的验证框架提供给我们 * 使用,但是也是需要很多繁琐的配置,页面查看起来也 * 不是很方便.一般程序员使用的也不多.所以写了这一 * 段JavaScript代码提供给大家使用.算是一个简单的 * JavaScript验证框架吧.使用起来很简单,配合下面几 * 种标签使用,能实现大多数表

js表单验证控制代码大全

http://www.cnblogs.com/SAL2928/archive/2008/10/24/1319020.html目录: 1:js 字符串长度限制.判断字符长度.js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证

jQuery简单表单验证效果

jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

JS表单验证类HTML代码实例

以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮点数验证.日期验证.邮件检查.网址验证.固定电话和手机号码验证.IP地址验证.邮编和QQ号码验证. MSN和身份证验证等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

js表单验证 插件jQuery-Validation-Engine-master

做项目基本离不开表单验证,想要美观,简洁,不占内存,用户体验效果好 所以我推荐一款js表单验证 因为我觉得这个挺好的,所以分享下 文档 下面也有下载的压缩包 https://github.com/posabsolute/jQuery-Validation-Engine 昵称做了ajax验证判断输入的用户是否存在 会提示先等待的信息...(我这里设置的时候是2秒) 如果用户名存在 会显示红色的气泡 如果用户名可以使用 会显示绿色的汽泡 还可以改变消息框的位置 如果弹出多个消息框 可以从上到下逐个提

简单的Jquery表单验证

本段代码举了一个最简单的表单验证实例,就是判断输入框是否为空而已,大家可以根据这个原理,加入正则表达式判断,实现各种功能强大的表单验证功能 <html>    <head>        <title>Validate empty fields</title>        <style type="text/css">            body{font-family:"Trebuchet MS",

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q