<!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. PHP isset()与empty()的使用区别

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...

  2. canvas验证码 - 随机字母数字

    基于canvas制作随机生成数字英文组合验证码效果,点击或刷新会自动重组.输入验证码提交验证效果代码. <div class="verification"> <i ...

  3. Automate the Sizing of your SGA in Oracle 10g

    How much memory does each of the individual components of the SGA need? Oracle now has methods to de ...

  4. Python 导出导入安装包

    python导出安装包 pip freeze > requirements.txt python导入安装包 pip install -r requirements.txt

  5. Fatal error: Can't use function return value in write context

    这个的出错原因很简单,先贴出错代码: <?php $contact = array("id"=>1, "姓名"=>"老高" ...

  6. ubuntu下配置JDK7环境变量

    ubuntu下JDK配置本质上和win是一样的: 1.去官网下载JDK7,找jdk-7u21-linux-i586.tar.gz并下载:http://www.oracle.com/technetwor ...

  7. SQL Server ->> 使用CROSS APPLY语句是遇到聚合函数中包含外部引用列时报错

    本次遇到的问题是CROSS APPLY的内部查询语句中的聚合函数包含CASE WHEN判断,且同时又内部语句的表的列和外部引用的表的列,此时会报下列的错误. 消息 8124,级别 16,状态 1,第 ...

  8. Oracle数据库突然宕机，处理方案

    一.现象 数据库突然断掉,无法响应,. 二.分析 查看日志发现错误如下(日志路径:D:\app\Administrator\diag\rdbms\orcl\orcl\trace\alert_hrpde ...

  9. SQL——快速定位相关的外键表

  10. NCE3

    Lesson1  A puma at large Pumas are large, cat-like animals which are found in America. When reports ...