您所在的位置:小祥子 » 编程 » CSS » 正文

表单验证

时间:2015-07-30 编辑:dllling 来源:CnBlogs

script实现用户名、密码的验证

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>表单验证</title>
        <script type="text/javascript">
            /**
             * 检测用户
             * @param   obj
             */
            var checkName = function(obj) {
                //1.获得用户输入的内容
                var value = obj.value;
                //2.定义正则表达式
                var reg = /^\s*$/;
                //3.获得span
                var span = document.getElementById('s1');
                span.innerHTML = "";
                if (reg.test(value)) {
                    span.innerHTML = '用户名不能为空';
                    span.className = 'error';
                    return false;
                }
                return true;
            }
            var checkPwd = function() {
                    //1.获得密码框
                    var pwd = document.forms[0]['pwd'];
                    var reg = /^\s*$/;
                    var span = document.getElementById('s2');
                    span.innerHTML = '';
                    if (reg.test(pwd.value)) {
                        span.innerHTML = '密码不能为空';
                        span.className = 'error';
                        return false;
                    }
                    if (pwd.value.length < 6) {
                        span.innerHTML = '密码长度不能少于6位';
                        span.className = 'error';
                        return false;
                    }
                    return true;
                }
                //重复密码校验
            var checkRepwd = function() {
                    //1.获得对象
                    var repwd = document.forms[0]['re1'];
                    //2.获得第一次的密码
                    var pwdValue = document.forms[0]['pwd'].value;
                    var span = document.getElementById('s3');
                    span.innerHTML = '';
                    if (repwd.value != pwdValue) {
                        span.innerHTML = '两次密码不一致';
                        span.className = 'error';
                        return false;
                    }
                    span.innerHTML = 'ok';
                    span.className = 'info';
                    return true;
                }
                /*
                 * 显示信息
                 */
            var showInfo = function(obj) {
                    //3.获得span
                    if (obj.name == 'username') {
                        var span = document.getElementById('s1');
                        span.innerHTML = '用户名必须填写';
                        span.className = 'info';
                    }
                    if (obj.name == 'pwd') {
                        var span = document.getElementById('s2');
                        span.innerHTML = '密码长度不能小于6位!';
                        span.className = 'info';
                    }
                }
                /*
                 * 表单提交前的验证
                 */
            var checkForm = function() {
                //1.为input提供id值document.getElmentById();
                //2.获得tbody,tbody.getElementsByTagName('input');
                //document.forms 可以获得文档中所有的表单对象
                //documents.forms[0][name|id]
                var nameInput = document.forms[0]['username'];
                console.log(nameInput);
                return checkName(nameInput) && checkPwd() && checkRepwd();
            }
        </script>
        <style type="text/CSS">
            .error {
                color: red;
            }
            .info {
                color: green;
            }
            #tb1 {
                margin-left: auto;
                margin-right: auto;
                border: 1px solid black;
                width: 500px;
                height: auto;
            }
            #tb1 tr:last-child {
                text-align: center;
            }
            p {
                text-align: center;
            }
            .show {
                width: 200px;
                text-align: left;
            }
        </style>
    </head>

    <body>
        <p>用户注册</p>
        <form action="#" method="get" >
            <table id="tb1">

                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" name="username" onblur="checkName(this);" />
                    </td>
                    <td class="show">
                        <span id="s1"></span>
                    </td>

                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="pwd" onblur="checkPwd();" />
                    </td>
                    <td class="show">
                        <span id="s2"></span>
                    </td>
                </tr>
                <tr>
                    <td>重复密码</td>
                    <td>
                        <input type="password" id="re1" onblur="checkRepwd();" />
                    </td>
                    <td class="show">
                        <span id="s3"></span>
                    </td>

                </tr>
                <tr>
                    <td colspan="3">
                        <input type="reset" value="重置" />
                        <input type="submit" value="提交" />
                    </td>

                </tr>
            </table>
        </form>
    </body>

</html>

关键词:验证