• 表单验证


    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;
                     500px;
                    height: auto;
                }
                #tb1 tr:last-child {
                    text-align: center;
                }
                p {
                    text-align: center;
                }
                .show {
                     200px;
                    text-align: left;
                }
            </style>
        </head>

        <body>
            <p>用户注册</p>
            <form action="#" method="get" onsubmit="return checkForm();">
                <table id="tb1">

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

                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input type="password" name="pwd" onblur="checkPwd();" onfocus="showInfo(this);" />
                        </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>

  • 相关阅读:
    # 20172307 2017-2018-2 《程序设计与数据结构》实验4报告
    20172307 2017-2018-2 《程序设计与数据结构》实验3报告
    20172307 2017-2018-2 《程序设计与数据结构》第10周学习总结
    软件工程之美40讲——最佳实践:小团队如何应用软件工程?
    软件工程之美39讲——项目总结:做好项目复盘,把经验变成能力
    软件工程之美38讲——日志管理:如何借助工具快速发现和定位产品问题 ?
    软件工程之美37讲——遇到线上故障,你和高手的差距在哪里?
    软件工程之美35讲——版本发布:软件上线只是新的开始
    软件工程之美36讲——DevOps工程师到底要做什么事情?
    20172330 2018-2019-1 《程序设计与数据结构》实验一报告
  • 原文地址:https://www.cnblogs.com/dlling/p/4688759.html
Copyright © 2020-2023  润新知