思路：
        1、定义页面
            通过表格格式化表单；
            表格行都有自己的背景颜色；
            单元格中的数据(文本等)用div进行封装，好操作；
        2、定义样式
            表格的样式；
            div的样式；
        3、动态效果
            页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；
            进行内容校验，不正确时显示警告信息。
 
代码如下：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>表单验证</title>
    <!-- 思路：
        1、定义页面
            通过表格格式化表单；
            表格行都有自己的背景颜色；
            单元格中的数据(文本等)用div进行封装，好操作；
        2、定义样式
            表格的样式；
            div的样式；
        3、动态效果
            页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；
            进行内容校验，不正确时显示警告信息。
     -->
    <style type="text/css">
        table{
            border: #A50DFA 1px solid;
            width: 500px;
            border-collapse: collapse;
        }
        table th, table td{
            border: #A50DFA 1px solid;
            padding:10px;
        }
        table th{
           
        }
        table td{
           
        }
        .errorinfo{
            color: #EA1508;
            font-family: "华文行楷";
            font-weight: bold;
            display: none;
        }
        .focus{
            border: #03F2FC 2px solid;
        }
        .outs{
            border: #81710D 1px solid;
        }
        .error{
            border: #FA0324 2px solid;
        }
    </style>
    <script type="text/javascript">
        function checkinput(input){
            input.className = "outs";
            input.onfocus = function(){
                this.className = "focus";
            }
        }
        /*窗口加载时就执行*/
        window.onload = function(){
            with(document.forms[0]){
                checkinput(user);
                checkinput(psw);
                checkinput(repsw);
                checkinput(mail);
            }
        }
        /*验证输入的数据*/
        /*方法一：每个输入框一个function，代码重复性高,舍弃不用。*/
        function checkDate(userNode){
            var value = userNode.value;
            var regex = /^\w{3,5}$/;
            var divNode = document.getElementById("userdiv");
            if(regex.test(value)){
                userNode.className = "outs";
                divNode.style.display = "none";
            }else{
                userNode.className = "error";
                divNode.style.display = "block";
            }
        }
        /*方法二*/
        function check(inputNode, regex, divId){
            var divNode = document.getElementById(divId);
            if(regex.test(inputNode.value)){
                inputNode.className = "outs";
                divNode.style.display = "none";
            }else{
                inputNode.className = "error";
                divNode.style.display = "block";
            }
        }
         /*验证用户名*/
        function checkUser(userNode){
            var regex = /^\w{3,5}$/;
            check(userNode, regex, "userdiv");
        }
          /*验证密码格式*/
        function checkPsw(pswNode){
            var regex = /^[a-z0-9]{4,8}$/i;
            check(pswNode, regex, "pswdiv");
        }
        /*验证两次密码是否一致*/
        function checkRepsw(repswNode){
            var psw = document.getElementById("psw").value;
            var repsw = repswNode.value;
            var divNode = document.getElementById("repswdiv");
            if(psw == repsw){
                repswNode.className = "outs";
                divNode.style.display = "none";
            }else{
                repswNode.className = "error";
                divNode.style.display = "block";
            }
        }
      /*验证邮箱*/
        function checkMail(mailNode){
            var regex = /^\w+@\w+(\.\w+)+$/;
            check(mailNode, regex, "maildiv");
        }
    </script>
</head>
<body>
    <form>
        <table>
            <tr>
                <th>用户注册</th>
            </tr>
            <tr>
                <td>
                    <div>用户名</div>
                    <div>
                        <input type="text" name="user" onblur="checkUser(this)"/>
                    </div>
                    <div class="errorinfo" id="userdiv">用户名填写错误。</div>
                    <div>用户名必须是3-5位，由字母(a-z)、数字(0-9)、下划线(_)组成</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>密码</div>
                    <div>
                        <input type="password" name="psw" id="psw" onblur="checkPsw(this)"/>
                    </div>
                    <div class="errorinfo" id="pswdiv">密码格式错误。</div><br/>
                    <div>确认密码</div>
                    <div>
                        <input type="password" name="repsw"  onblur="checkRepsw(this)"/>
                    </div>
                    <div class="errorinfo" id="repswdiv">两次输入密码不一致。</div>
                    <div>密码必须是4-8位，由字母(a-z)、数字(0-9)组成</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>邮箱</div>
                    <div>
                        <input type="text" name="mail" onblur="checkMail(this)"/>
                    </div>
                    <div class="errorinfo" id="maildiv">邮箱格式错误，请规范填写。</div>
                </td>
            </tr>
            <tr>
                <th><input type="button" value="提交数据" onclick="submitDate()"></th>
            </tr>
        </table>
    </form>
</body>
</html>
 
 
 
 
 

JS实战 · 表单验证的更多相关文章

  1. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  2. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  3. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  4. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  5. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  6. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  7. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

  8. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  9. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

随机推荐

  1. NXP恩智浦P89V52X2单片机破解P89C52X2BA芯片解密技术分享！

    NXP恩智浦P89V52X2单片机破解P89C52X2BA芯片解密 P89V52X2是一款带有8kB Flash.256B数据RAM和192B数据EEPROM的80C51微控制器.这个器件可以在完全替 ...

  2. echarts之tooltip

    tooltip:提示框,鼠标悬浮交互时的信息提示. 当trigger为'item'时 tooltip : { trigger: 'item' }, 当trigger为'axis'时 tooltip : ...

  3. FFmpeg纯净版解码 av_parser_parse2

    主要是通过av_parser_parse2拿到AVPaket数据,跟av_read_frame类似. 输入必须是只包含视频编码数据“裸流”(例如H.264.HEVC码流文件),而不能是包含封装格式的媒 ...

  4. c语言文件读写操作总结

    C语言文件读写操作总结 C语言文件操作 一.标准文件的读写 1.文件的打开 fopen() 文件的打开操作表示将给用户指定的文件在内存分配一个FILE结构区,并将该结构的指针返回给用户程序,以后用户程 ...

  5. c#.net网页跳转七种方法

    一.目前在ASP.NET中页面传值共有这么几种方式: .Response.Redirect("http://www.hao123.com",false); 目标页面和原页面可以在2 ...

  6. 《转》Unity3D研究院之UGUI一个优化效率小技巧

    无意间发现了一个小技巧.如下图所示,可以发现UGUI的Image组件的RaycastTarget勾选以后会消耗一些效率,为了节省效率就不要勾选它了,不仅Image组件Text组件也有这样的问题. 一般 ...

  7. 【转】浅谈truncate的使用

    delete 操作不会改变表的高水标记,因此如果我们对一个表插入1000万条数据,然后再回滚(对insert操作做回滚相当于相应地做delete操作),会使表的高水标记增长得很高,这时虽然我们操作的表 ...

  8. IE6图片元素img下高度超出出现多余空白

    将图片转换为块级元素:display:block; 设置图片的垂直对齐方式:vertical-align属性为top,text-top,bottom,text-bottom 设置父元素的字体大小为0p ...

  9. C++: Virtual Table and Shared Memory

    See at: 补充栏3: C++对象和共享内存 (叙述内容和Link1的内容基本一致) <C++网络编程 卷1:运用ACE和模式消除复杂性> <C++ Network Progra ...

  10. 关于这个博客以及C++入门该懂的一些东西

    给三牧中学c++入门的同学们看的博客. 大概是入门一类的?说不定会写点自己的结题报告. 写的不好/写错了别怪我,蒟蒻瑟瑟发抖. 天哪要开始写入门了我好慌那么接下来是编译器连接. (本蒟蒻喜欢用DEV ...