<!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. Debian出现in the drive ‘/media/cdrom/’ and press enter解决办法

    没有光盘源解决打开/etc/apt/sources.list文件,注释掉cdrom那一行,然后再执行apt-get update更新下deb仓库这样以后再使用apt-get安装时就不会再搜寻cdrom ...

  2. Spring手册

    一.Spring 简介 二.结构体系 三.七大主要模块 四.Spring Maven依赖 五 .Sprinf framework 一.Spring 简介 spring是一个开源的轻量级的应用开发框架, ...

  3. 干货：如何使用N点虚拟管理系统？

    N点虚拟主机管理系统怎么用呢?最近有许多朋友问我关于这款虚拟主机管理系统如何使用?在讲如何使用N点虚拟主机管理系统之前,我们先来了解一下N点虚拟主机管理系统的介绍. ​      N点虚拟主机管理系统 ...

  4. Linux 下 python如何配置virtualenv

    .安装virtualenv pip3 install virtualenv pip install -i https://pypi.tuna.tsinghua.edu.cn/simple virtua ...

  5. 解决点击cell执行动画导致的重用问题

    解决点击cell执行动画导致的重用问题 说明: 动画的细节都是裸露的,并没有封装,靠看官来优化了. 效果: 源码: https://github.com/YouXianMing/UITableView ...

  6. Redis学习---CentOs/RedHat下Redis的安装

    redis是C语言开发,建议在linux上运行,本教程使用Centos6.4作为安装环境.      安装redis需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gc ...

  7. Python学习---django-debug-tools安装

    [官网]http://django-debug-toolbar.readthedocs.io/en/1.2/installation.html [更多安装参考]http://blog.csdn.net ...

  8. zabbix日常监控项web（八）

    存在一种情况:nginx或者httpd服务本身运行正常,但是网页挂了,类似于网页被黑,或者40X之类的...:可以用zabbix把web页面访问也监控起来,第一时间得知web崩溃信息并做相应处理. 被 ...

  9. 微信小程序websocket

    微信小程序websocket 微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况, ...

  10. 导出类成员里含有stl对象

    How to export an instantiation of a Standard Template Library (STL) class and a class that contains ...