JavaScript之简单的表单验证

当输入的数据符合要求时，显示

 

 

 

 

 

 

 当输入的数据不符合要求时，显示

 

 

 

 

 

 

 css样式：

<style type="text/css">
        body {
            background: #ccc;
        }

        label {
            width: 40px;
            display: inline-block;
        }

        span {
            color: red;
        }

        .container {
            margin: 100px auto;
            width: 400px;
            padding: 50px;
            line-height: 40px;
            border: 1px solid #999;
            background: #efefef;
        }

        span {
            margin-left: 30px;
            font-size: 12px;
        }

        .wrong {
            color: red
        }

        .right {
            color: green;
        }

        .defau {
            width: 200px;
            height: 20px;
        }

        .de1 {
            background-position: 0 -20px;
        }
    </style>

body:

<div class="container" id="dv">
    <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
    <label>手机</label><input type="text" id="phone"><span></span><br/>
    <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
    <label>座机</label><input type="text" id="telephone"><span></span><br/>
    <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>

 JavaScript:

<script src="js/common.js"></script>
<script>
    //qq的
    checkInput(my$("qq"),/^\d{5,11}$/);
    //手机
    checkInput(my$("phone"),/^\d{11}$/);
    //邮箱
    checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
    //座机号码
    checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
    //中文名字
    checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
    cheackInput(my$("qq"),/^\d{5,10}$/);
    cheackInput(my$("phone"),/^[1-9]{11}$/);
    cheackInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
    cheackInput(my$("fullName"),/^[\u4e00\u9fa5]{2,6}$/);
    function checkInput(input,reg) {
        input.onkeyup=function () {//文本框注册失去焦点的事件
            if(reg.test(this.value)){//验证文本框里的内容是否匹配
                this.nextElementSibling.innerHTML="太好了，输入正确";
                this.nextElementSibling.style.color="green";
            }else {
                this.nextElementSibling.innerHTML="警告！！！输入错误";
                this.nextElementSibling.style.color="red";
            }
        };
    }