<script type="text/javascript">
     function $(id) {
         return document.getElementById(id);
     }
        
     function check() {
         var email = $("email").value;
         var password = $("password").value;
         var repassword = $("repassword").value;
         var name = $("name").value;
            
         $("emailinfo").innerHTML = "";
         $("passwordinfo").innerHTML = "";
         $("repasswordinfo").innerHTML = "";
         $("nameinfo").innerHTML = "";
            
         if(email == "") {
             $("emailinfo").innerHTML = "Email值不能为空";
             $("email").focus();
             return false;
         }
            
         if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
             $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
             $("email").focus();
             return false;
         }
            
         if(password == "") {
             $("passwordinfo").innerHTML = "密码不能为空";
             $("password").focus();
             return false;
         }
            
         if(password.length < 6) {
             $("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
             $("password").focus();
             return false;
         }
            
         if(repassword != password) {
             $("repasswordinfo").innerHTML = "两次输入的密码不一致";
             $("repassword").focus();
             return false;
         }
            
         if(name == "") {
             $("nameinfo").innerHTML = "姓名不能为空";
             $("name").focus();
             return false;
         }
            
         for(var i = 0; i < name.length; i++) {
             var j = name.subString(i , i+1);
             if(isNaN(j) == false) {
                 $("nameinfo").innerHTML = '姓名中不能包含数字';
                 $("name").focus();
                 return false;
             }
         }
     }
 </script>
 
 <form name="login_form" method="post" onsubmit="return check()">
 <div>
 Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span>
 </div>
     <br>
 <div>
 密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span>
 </div>
 <br>    
 <div>
 重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span>
 </div>
     <br>
 <div>
 姓名:<input type="text" name="name" id="name" /><span id="nameinfo"></span>
 </div>
 <br>    
 <div>
 <input type="submit" value="注册" />
 </div>
 </form>

javaScript 验证表单提交的更多相关文章

  1. 项目总结15:JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

  2. Javascript阻止表单提交

    Javascript阻止表单提交 Html 1.<form name="loginForm" action="login.aspx" method=&qu ...

  3. javascript实现表单提交加密

    javascript实现表单提交加密 通常表单的提交有两种方式,一是直接通过html的form提交,代码如下: <form action="" method="&q ...

  4. JavaScript form表单提交与验证

    原网址:https://blog.csdn.net/vipwxs/article/details/79119701 一.form对象的属性: name:获取表单的名称,该name一般给JS使用 met ...

  5. 如何通过纯javascript实现表单提交

    通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交.有些地方,我想使用纯JS实现,比方简单的登陆跳转.话不多说,看原代码, laravel中的HTML部分,如果不 ...

  6. JavaScript进行表单提交

    表单结构,设置form表单的id属性,method="post/get","action"要跳转的页面(jsp或servlet) <form name=& ...

  7. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  8. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  9. asp.net mvc 模型验证注解,表单提交

    一.添加模型 public class Account { public int ID { get; set; } [Display(Name = "姓名")] //设置要显示的字 ...

随机推荐

  1. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  2. 添加右键菜单命令 在此处打开命令窗口(E)(带图标)

    @color 0A @title 添加右键菜单命令 在此处打开命令窗口(^&E)(带图标) by wjshan0808 @echo off reg add HKCR\Directory\Bac ...

  3. [转]彻底征服 Spring AOP 之 理论篇

    基本知识 其实, 接触了这么久的 AOP, 我感觉, AOP 给人难以理解的一个关键点是它的概念比较多, 而且坑爹的是, 这些概念经过了中文翻译后, 变得面目全非, 相同的一个术语, 在不同的翻译下, ...

  4. 用c的数组简单的模拟了入栈

    其实很简单,只要控制住输出时倒输出.且只输出一个 #include <stdio.h>#include <stdlib.h>int zhan[20];int n=-1;void ...

  5. Python爬虫爬取百度贴吧的图片

    根据输入的贴吧地址,爬取想要该贴吧的图片,保存到本地文件夹,仅供参考: #!/usr/bin/python#_*_coding:utf-8_*_import urllibimport urllib2i ...

  6. Python爬虫爬取百度贴吧的帖子

    同样是参考网上教程,编写爬取贴吧帖子的内容,同时把爬取的帖子保存到本地文档: #!/usr/bin/python#_*_coding:utf-8_*_import urllibimport urlli ...

  7. Windows Phone 十五、HttpWebRequest

    Windows 运行时中支持网络资源访问的对象:HttpWebRequest 对象 发送 GET/POST 请求,HttpHelper 封装,超时控制. HttpClient 对象 发送 GET/PO ...

  8. Visual Studio配色方案

    Eclipse开源工具和VS在诸多方面真的是差距非常大,无奈Java编程,使用VS非常麻烦.所以只能选择Eclipse 但是Eclipse的系统配色,又实在是不舒服,于是抽时间,从VS上抠了一份默认的 ...

  9. Centos vsftpd服务器搭建

    Centos vsftpd服务器搭建 时间:2016-07-18 1.最为简单的vsftpd服务器搭建 1.安装vsftpd 1.yum 安装 yum install vsftpd 2.rpm文件安装 ...

  10. 大规模web 服务开发技术

    <大规模web 服务开发技术> 是一本讲解大型Web 应用的入门级书籍,能够让我们接触到大应用的知识点. 目录如下: 第1章  大规模Web服务的开发定位——掌握整体第2章  大规模数据处 ...