<!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. Office - Excel 2013

    1. 在使用TODAY()时需要注意格式,比如,如果系统区域是中国,那么格式为2015/7/28,如果在单元格中设置了其它格式(比如美国格式 3/24/2015),则可能无法比较: 2. $表示cel ...

  2. url override implements session

    url 重写实现会话概述 URL重写是对GET请求参数的应用,当服务器响应浏览器上一次请求时,将某些相关信息以超链接方式响应给浏览器,超链接中包括请求参数信息. 特点:URL必须以GET方式发送请求. ...

  3. Object equals 方法

    package com.mydemo.controller; public class TestEquals { public static void main(String[] args) { Do ...

  4. jsp到java后台中文乱码问题

    ---首先描述一下我的情况,我的jsp    设置了编码格式 <%@ page language="java" contentType="text/html; ch ...

  5. 结对编程的感想&收获

    关于结对编程的感想.感受,见我的另一篇随笔——<构建之法>结对编程   感想 下面我来谈谈本次结对编程的收获以及发现的问题 收获 ①这是我人生中第一次做UI界面设计,刚拿到这个题目还是比较 ...

  6. VVeboImageView

    VVeboImageView https://github.com/johnil/VVeboImageView A UIImageView to play gif with low memory. 一 ...

  7. 生成器-yield初接触

    什么是生成器? 生成器的实质就是迭代器 在python中有三种方式来获取生成器 1. 通过生成器函数 2. 通过各种推导式实现生成器 3. 通过数据的转换也可以获取生成器 将函数中的return换成y ...

  8. Python成员运算符

    Python成员运算符 其他语言没有,是否包含运算符,主要应用在字符串或者集合中 测试实例中包含了一系列的成员,包括字符串,列表或元组. #使用场景01:字符串是否包含另外一个字符串? str01 = ...

  9. 张高兴的 Windows 10 IoT 开发笔记：FM 电台模块 KT0803L

    This is a Windows 10 IoT Core project on the Raspberry Pi 2/3, coded by C#. GitHub:https://github.co ...

  10. 解决hibernate双向关系造成的一方重复执行SQl，或者死循环的问题

    系统采用struts-json hibernate3. 在对关联表配置manytoone onetomany双向关联的时候,在执行一方的时候,会发现打印出来的SQL语句多执行了一次或者多次.经过调试, ...