表单验证的实例 - Newbie_小白

表单验证的实例

HTML：
<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">
    </script>
    <script>
        function regs(click) {
            var username = document.getElementsByName("username")[0];
            var email = document.getElementsByName("email")[0];
            var pword = document.getElementsByName("pword")[0];
            var spword = document.getElementsByName("spword")[0];
            var tip1 = gspan(username);
            var tip2 = gspan(email);
            var tip3 = gspan(pword);
            var tip4 = gspan(spword);
            //获得焦点时 提示
            username.onfocus = function () {
                this.select();
                tip1.innerHTML = "用户名的长度在3-20之间";
                tip1.className = "tips1";
            }; //其中select函数表示获得焦点时 全选文本
            email.onfocus = function () {
                this.select();
                tip2.innerHTML = "请按照邮箱的格式输入";
                tip2.className = "tips1";
            }
            pword.onfocus = function () {
                this.select();
                tip3.innerHTML = "密码必须在6-20位之间";
                tip3.className = "tips1";
            }
            spword.onfocus = function () {
                this.select();
                tip4.innerHTML = "确定密码要和上面一致，规则也要相同";
                tip4.className = "tips1";
            }
            //失去焦点时 先判断是否为空 然后判断长度；
            username.onblur = function () {
                var val = this.value;
                if (val.match(/^\S+$/) && val.length >= 6 && val.length <= 20) {
                    tip1.innerHTML = "正确";
                    tip1.className = "tips3";

                } else {
                    tip1.className = "tips2";
                }
            } //注意不是自定义的量都要加双引号“”;val.match(/^\S+$/)表示不包括空白字符，不管位置（空白字符在开头，结尾或者在之间）
            email.onblur = function () {
                var val = this.value;
                if (val.match(/\w+@\w+\.\w/)) {
                    tip2.innerHTML = "正确";
                    tip2.className = "tips3";
                } else {
                    tip2.className = "tips2";
                }
            }
            pword.onblur = function () {
                var val = this.value;
                if (val.match(/^\S+$/) && val.length >= 6 && val.length <= 20) {
                    tip3.innerHTML = "正确";
                    tip3.className = "tips3";
                } else {
                    tip3.className = "tips2";
                }
            }

　　spword.onblur = function () {
                var val = this.value;
                if (val == pword.value && val != '') {
                    tip4.innerHTML = "正确";
                    tip4.className = "tips3";
                } else {
                    tip4.className = "tips2";
                }
            }
            if (click == "click") {
                username.onblur();
                email.onblur();
                pword.onblur();
                spword.onblur();
            }
            ; //提交表单时 整体进行判断；
            return false;
        }
        //获取obj后面元素span 用来提示信息；span一定要大写
        //       nextSibling 属性可返回某个元素之后紧跟的元素（处于同一树层级中）。如果无此节点，则属性返回 null。

        function gspan(obj) {
            if (obj.nextSibling.nodeName != "SPAN") {
                gspan(obj.nextSibling);
            } else {
                return obj.nextSibling;
            }
        }

        onload = regs; //页面加载完发生（或者执行）
    </script>
    <style>
        * {
            font-family: "微软雅黑", "arial", " sans-serif";
            font-size: 16px;
        }

        body {
            margin: 20px;
        }

        #ul {
            list-style: none;
        }

        #ul li label {
            display: inline-block;
            width: 98px;
            height: 35px;
            line-height: 35px;
            /*border: 1px red solid;*/
            text-align: justify;
            text-align-last: justify;
        }

        .tips {
            color: #999999;
            padding-left: 6px;
        }

        .tips1 {
            color: #0000FF;
        }

        .tips2 {
            color: red;
        }

        .tips3 {
            color: green;
        }
    </style>
</head>

<body>
　　<form name="firstt" method="post" action="" onSubmit="return regs('click')">
   　　 <ul id="ul">
      　　  <li><label>用户名 ：</label> <input type="text" name="username"/><span class="tips">用户名不能为空</span></li>
       　　 <li><label>邮箱：</label> <input type="text" name="email"/><span class="tips">邮箱不能为空</span></li>
      　　  <li><label>密码 ：</label> <input type="text" name="pword"/><span class="tips">密码不能为空</span></li>
       　　 <li><label>确定密码：</label> <input type="text" name="spword"/><span class="tips">确定密码不能为空</span></li>
  　　  </ul>

    <button style="background:#358119;color: seashell;margin: 10px 0 0 150px;">确定</button>
　　</form>
</body>
</html>

result：

运行：

posted on 2016-05-16 20:34 Newbie_小白阅读(275) 评论(0) 收藏举报