<!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 运行时权限处理（from jianshu）

    https://www.jianshu.com/p/e1ab1a179fbb 翻译的国外一篇文章. android M 的名字官方刚发布不久,最终正式版即将来临! android在不断发展,最近的更新 ...

  2. Base64编码和解码实现

    function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...

  3. Angularjs 表格插件的使用

    对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...

  4. MongoDB 安装和使用问题总结

    1. 一直安装不了[一直next下去但最后没有发现生成文件夹] 去掉 Installing MongoDB Compass 前面的打勾 2. 需要开两个cmd运行mongodb 开第一个,输入以下运行 ...

  5. [翻译] GMCPagingScrollView

    GMCPagingScrollView https://github.com/GalacticMegacorp/GMCPagingScrollView GMCPagingScrollView is a ...

  6. [翻译] DraggableYoutubeFloatingVideo

    DraggableYoutubeFloatingVideo DraggableYoutubeFloatingVideo allows you to play videos on a floating ...

  7. if 的一切

    第一种语法: if 条件: # @引号是为了把条件和结果分开. 结果1 # 一个Tab或者4个空格 @告诉程序满足上面的if条件才会执行结果1结果2 如果条件为真(True),执行结果1,然后执行结果 ...

  8. 关于layui(layer)子页面获取不到父页面jQuery对象的问题。

    如果在使用layui-layer模块过程中,在子页面执行代码: window.parent.$("#id").val() 报错:window.parent.$ is not a f ...

  9. Linux新建用户没有设置密码

    只要你能登陆root账户就行 登陆root账户 输入  echo "密码“ | passwd --stdin 用户名

  10. adb shell 运行时报错"adb server version (26) doesn't match this client (39); killing..."的解决方案

    adb即 Android Debug Bridge 是一个通用的命令行工具,可用于通过PC端对连接的Android模拟器设备或连接至电脑的真实物理设备进行命令行操作.目前,许多软件均会借助 adb 工 ...