<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        function checknm() {
            var check = false;
            var username = document.getElementsByName("username")[0];
            if (1<=username.value.length && username.value.length<=10){
                console.log(document.getElementById("checktext1").innerHTML = " √")
                check = true;
            }else{
              
                document.getElementById("checktext1").innerHTML = " × 最多10位且不为空";
                check = false;
            }
            return check;
        }
       
        function checkide(){
            var check = false;
            var userid = document.getElementsByName("userid")[0];
            if (1<=userid.value.length && userid.value.length<=10){
                document.getElementById("checktext2").innerHTML = " √";
                check = true;
               
            }else{
                document.getElementById("checktext2").innerHTML = " × 最多10位且不为空";
                check = false;
            }
            return check;
        }
        function checkpwd(){
            var check = false;
            var userpwd = document.getElementsByName("userpwd")[0];
            if (6<userpwd.value.length && userpwd.value.length<=15){
                document.getElementById("checktext3").innerHTML = " √";
                check = true;
               
            }else{
                document.getElementById("checktext3").innerHTML = " × 最少6位，最多15位";
                check = false;
            }
            return check;
        }
        function checkpwd1(){
            var check = false;
            var userpwd1 = document.getElementsByName("userpwd1")[0];
            var userpwd = document.getElementsByName("userpwd")[0];
            if (userpwd1.value == userpwd.value){
                document.getElementById("checktext4").innerHTML = " √密码一致";
                check = true;
           
               
            }else{
                document.getElementById("checktext4").innerHTML = " × 两次密码不一致";
                check = false;
            }
            return check;
        }
        function checkeml(){
            var check = false;
            var useremail = document.getElementsByName("useremail")[0];
            if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(useremail.value)){
                document.getElementById("checktext5").innerHTML = " × 邮箱格式不规范";
                check = false;
               
            }else{          
                document.getElementById("checktext5").innerHTML = " √";
                check = true;
            }
            return check;
        }
        function check(){
            var check = checknm() && checkide() && checkpwd() && checkpwd1() && checkeml();
            return check;
  
        }
    </script>
</head>
<body>
    <!-- <a href="./login.html"></a> -->
    <!-- <button onclick="yz()" >验证账号</button> -->
    <form method="get" action="./success.html" onsubmit = "return check()">
        <table align="center">
            <tr>
                <td><label>*</label><strong>用户名:</strong></td>
                <td><input type="text" name="username" value="" placeholder="用户名(5位以内)" onchange="checknm()"></td>
                <td><span id="checktext1"></span></td>
            </tr>
            <tr>
                <td><label>*</label><strong>用户ID:</strong></td>
                <td><input type="text" name="userid" value="" placeholder="数字ID(11位以内)" onchange="checkide()"></td>
                <td><span id="checktext2"></span></td>
            </tr>
            <tr>
                <td><label>*</label><strong>登录密码:</strong></td>
                <td><input type="password" name="userpwd" value="" placeholder="请输入密码(6~15)" onchange="checkpwd()"></td>
                <td><span id="checktext3"></span></td>
            </tr>
            <tr>
                <td><label>*</label><strong>确认密码:</strong></td>
                <td><input type="password" name="userpwd1" value="" placeholder="请再次确认密码" onchange="checkpwd1()"></td>
                <td><span id="checktext4"></span></td>
            </tr>
            <tr>
                <td><label>*</label><strong>电子邮箱:</strong></td>
                <td><input type="text" name="useremail" value="" placeholder="邮箱地址，如：123@qq.com" onchange="checkeml()"></td>
                <td><span id="checktext5"></span></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交"></td>
                <td><a href="">重填</a></td>
            </td>
            </tr>
        </table>
    </form>
</body>
</html>

利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)的更多相关文章

  1. 将任意一个jQuery对象进行表单序列化，免除了提交请求时大量拼写表单数据的烦恼，支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  2. 仿 ELEMENTUI 实现一个简单的 Form 表单

    原文:仿 ElmentUI 实现一个 Form 表单 一.目标 ElementUI 中 Form 组件主要有以下 功能 / 模块: Form FormItem Input 表单验证 在这套组件中,有 ...

  3. 从零开始编写自己的C#框架（6）——SubSonic3.0插件介绍（附源码）

    前面几章主要是概念性的东西为主,向初学者们介绍项目开始前的一些知识与内容,从本章开始将会进入实操阶段,希望跟着本系统学习的朋友认真按说明做好每一步操作(对于代码最好是直接照着文档内容在你的IDE中打一 ...

  4. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. 使用js编写一个简单的运动框架

    下班后,,没事捣鼓捣鼓个人的小爱好. 首先,说明我的这个运动框架(css所有属性)也是常见的框架一种,健壮性并不是太好,对于新手学习倒是挺好,,若是大神,老司机请拐弯. 上来,我们先定义一个区块,然后 ...

  6. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  7. 写一个简单的form表单，当光标离开表单的时候表单的值发送给后台

    <body> <form action="index.php"> <input type="text" name="tx ...

  8. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图（附源码下载）

    基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...

随机推荐

  1. 记一次Android studio升级之后的坑

    像往常一样打开Android studio,但这次它提示我升级!说是什么为了更好的体验,在好奇心的驱使下,我毅然地点击了“update”按钮.升级之后,编译项目,报出了N多个error,我的心都慌完! ...

  2. 基于goahead 的固件程序分析

    # 前言 本文由 本人 首发于 先知安全技术社区: https://xz.aliyun.com/u/5274 最近在分析 dlink 的一个固件时遇到了用 goahead 开发的 web 服务.本文以 ...

  3. zookeeper应用 - FIFO 队列 分布式队列

    使用ZooKeeper实现的FIFO队列,这个队列是分布式的. package fifo; import java.util.Collections; import java.util.List; i ...

  4. Typescript 接口（interface）

    概述 typescript 的接口只会关注值的外形,实际就是类型(条件)的检查,只要满足就是被允许的. 接口描述了类的公共部分. 接口 interface Person { firstName: st ...

  5. 如何进行 Python性能分析，你才能如鱼得水？

    [编者按]本文作者为 Bryan Helmig,主要介绍 Python 应用性能分析的三种进阶方案.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 我们应该忽略一些微小的效率提升,几乎在 9 ...

  6. Angular-学习。

     今天刚学了点关于Angular的知识,就迫不及待的想跟大家来分享. 1.angular.extend ( )方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中. <script typ ...

  7. Oracle EBS 报错：此责任无可用函数。 更改责任或与您的系统管理员联系。

    解决:修改配置文件        1.FND: Diagnostics (FND:诊断)            启用设为”是”        2.Utilities:Diagnostics (公用程序 ...

  8. 【Redis】Linux下Redis安装与redis-desktop-manager使用（无法连接Redis服务器解决方法）

    新手小白开始学习nosql数据库Redis,首先从安装入手. 全文分两部分:Linux下安装redis,可视化工具redis desktop manager的简单使用. 一.安装 下载,解压缩和编译R ...

  9. web.config设置之system.webServer 详细介绍，为网站设置默认文档

    如何:为 IIS 7.0 配置 <system.webServer> 节2008-06-14 22:26http://technet.microsoft.com/zh-cn/sysinte ...

  10. centos安装不上的问题

    Installing VMware Tools, please wait...mount: special device /dev/hda does not existmount: block dev ...