JS表单验证与jQuery应用-优快云博客

JS——表单验证

Thin Client 瘦客户端客户端做的事少
Fat Client 胖客户端客户端做的事多
用到了正则表达式需要注意的是使用创建正则表达式的字面类量语法创建正则表达式对象
给表单对象绑定提交事件，阻止表单提交等到验证通过了之后手动提交表单
注意&&和&之前的区别，前者有短路效果后者没有

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;

            }
            #login {
                font-size: 20px;
            }
            #login label {
                display: inline-block;
                width: 150px;
                text-align: right;
                margin-right: 20px;
            }
            .formitem {
                margin: 20px 0;
            }
            .hint {
                display: inline-block;
                width: 320px;
                font-size: 14px;
            }
            .correct {
                color: green;
            }
            .incorrect {
                color: red;
            }
            #login input[type="submit"] {
                display: inline-block;
                width: 120px;
                height: 30px;
                background-color: darkred;
                color: white;
                font: 20px/30px '幼圆';
                border: none;
                cursor: pointer;
                margin-left: 200px;
            }]
        </style>
    </head>
    <body>
        <form id="login" method="post" action="" enctype="multipart/form-data">
            <div class="formitem">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" />
                <span class="hint" id="uidHint"></span>
            </div>
            <div class="formitem">
                <label for="password">请设置密码:</label>
                <input type="password" id="password" name="password" />
                <span class="hint" id="pwdHint"></span>
            </div>
            <div class="formitem">
                <label for="repassword">请确认密码:</label>
                <input type="password" id="repassword" name="repassword" />
                <span class="hint" id="rePwdHint"></span>
            </div>
            <div class="formitem">
                <label for="tel">手机号:</label>
                <input type="text" id="tel" name="tel" />
                <span class="hint" id="telHint"></span>
            </div>
            <div class="formitem">
                <label for="tel">验证码:</label>
                <input type="text" id="code" name="code" />
                <input type="button" value="获取验证码" />
            </div>          
            <div class="formitem">
                <input type="submit"  value="立即开通"/>
            </div>
            <div class="formitem">
                <label for="agreement"></label>
                <input type="checkbox" id="agreement" name="agreement" />
                <a href="#">《相关协议》</a>
                <span class="hint"></span>
            </div>
        </form>
    <script type="text/javascript" src="js/mylib.js" ></script>
    <script>

        (function () {

            var uid = $('username');
            //使用创建正则表达式的字面类量语法创建正则表达式对象
            var uidRegEx = /^\w{6,20}$/;
            var pwdRegEx = /^.{8,20}$/;
            var telRegEx = /^1[345789]\d{9}$/;
/*          handleEvent(uid, 'focus', function() {
                var uidHint = $('uidHint');
                uidHint.textContent = '用户名由字母数字下划线'
            });*/
            function checkUsername () {
                var uidHint = $('uidHint');
                var username = uid.value.trim();
                //创建正则表达式对象的字面量语法
                if (uidRegEx.test(username)) {
                    uidHint.textContent = '√';
                    uidHint.className = 'hint correct';
                    return true;
                }else {
                    uidHint.textContent = '用户名由字母数字下划线构成且长度为6-20个字符';
                    uidHint.className = 'hint incorrect';
                    return false;
                }
            }
            handleEvent(uid, 'blur', checkUsername);
            var pwd = $('password');
            function checkPassword() {
                var pwdHint = $('pwdHint');
                var password = pwd.value;
                if (pwdRegEx.test(password)) {
                    pwdHint.textContent = '√';
                    pwdHint.className = 'hint correct';
                    return true;
                }else {
                    pwdHint.textContent = '密码长度为8-20个字符';
                    pwdHint.className = 'hint incorrect';
                    return false;
                }
            }
            handleEvent(pwd, 'blur', checkPassword);
            var rePwd = $('repassword');
            function checkRePassword() {
                var password = pwd.value;
                var rePwdHint = $('rePwdHint');
                var repassword = rePwd.value;
                if (repassword.length <= 0) {
                    rePwdHint.textContent = '密码不能为空';
                    rePwdHint.className = 'hint incorrect';
                    return false;
                }
                if (password == repassword) {
                    rePwdHint.textContent = '√';
                    rePwdHint.className = 'hint correct';
                    return true;
                }else {
                    rePwdHint.textContent = '两次输入不一致';
                    rePwdHint.className = 'hint incorrect';
                    return false;
                }
            }
            handleEvent(rePwd, 'blur', checkRePassword);
            var tel = $('tel');
            function checkTel() {
                var telphone = tel.value;
                var telHint = $('telHint');
                if (telRegEx.test(telphone)) {
                    telHint.textContent = '√';
                    telHint.className = 'hint correct';
                    return true;
                }else {
                    telHint.textContent = '请输入正确的手机号';
                    telHint.className = 'hint incorrect';
                    return false;
                }
            }
            handleEvent(tel, 'blur',checkTel );
            var form = $('login') || document.forms[0];
            //给表单对象绑定提交事件
            handleEvent(form, 'submit', function(evt) {
                evt = evt || window.event;
                //阻止表单提交等到验证通过了之后手动提交表单
                evt.preventDefault();
                // 如果没有选中会弹框，因为有return程序不会向下执行
                if (!$('agreement').checked) {
                    alert('请先选中协议')
                    return ;
                }
                //请注意&&和&之前的区别，前者有短路效果后者没有
                if (checkUsername() &
                    checkPassword() &
                    checkRePassword() &
                    checkTel()) {
                var target = evt.target || evt.srcElement;
                //如果所有表单数据都通过了提交表单
                target.submit();
            }
            })
        } ());

    </script>
    </body>
</html>

面向对象——实现飞机移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .plane {
                position: fixed;
                width: 100px;
                height: 124px;
                background-image: url(img/hero1.png);

            }
        </style>
    </head>
    <body>

        <script>
            function Plane(x, y) {
                this.x = x;
                this.y = y;
                this.isJetting = true;
            };
    //创建飞机的方法
            Plane.prototype.init = function () {
                var div = document.createElement('div');
                div.className = 'plane';
                div.style.left = this.x + 'px';
                div.style.top = this.y + 'px';
                this.photo = div;
                document.body.appendChild(div);
            };
    //飞机飞行的方法
            Plane.prototype.fly = function() {
                this.isJetting = !this.isJetting;
                var style = document.defaultView.getComputedStyle(this.photo);
                var top = parseInt(style.top) - 2;
                this.photo.style.top = top + 'px';
                var bgImage = this.isJetting ? 'url(img/hero1.png)' : 'url(img/hero2.png)';
                this.photo.style.backgroundImage = bgImage;
            };
            (function() { 
                var p1 = new Plane(100, 600);
                var p2 = new Plane(300, 450);
                var p3 = new Plane(600, 700);
                var planes = [p1, p2, p3];
                for (var i = 0; i < planes.length; i += 1) {
                    planes[i].init();
                }
                setInterval(function() {
                    for (var i = 0; i < planes.length; i += 1) {
                        planes[i].fly();
                    }
                }, 50)
            }());
        </script>
    </body>
</html>

jQuery

jQuery / Zepto.js 这两种几乎一模一样，只是Zepto.js体积更小，不兼容低版本IE，比较适合移动端开发

用jQuery修改文字

用jQuery不用考虑兼容性问题
导入jQuery可以选择在本地加载或从cdn服务器上下载
//on绑定事件，off解绑事件不要直接写事件
//css中传一个参表示读。传两个表示改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>静夜思</h1>
        <hr />
        <p>床前明月光</p>
        <p>疑似地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
        <button id="button1">改颜色</button>
        <button id="button2">隐藏</button>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
        <script>
            //表示先从网上拿jquery如果不成功，就从本地拿,后面的<\/script>要加转义
            window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>');
        </script>
        <script>
            $(function() {
                //on绑定事件，off解绑事件
                $('#button1').on('click', function() {
                    //css中传一个参表示读。传两个表示改
                    $('p:odd').css('color','red').css('font-size','32px');
                    $('p:even').css({'color':'blue','background-color': 'gray'});
                });
                $('#button2').on('click', function(evt) {
                    var buttonValue = $(evt.target).text();
                    if (buttonValue == '隐藏文字') {
                        $('p').fadeOut(3000);
                        $(evt.target).text('显示文字');
                    }else{
                        $('p').fadeIn(3000);
                        $(evt.target).text('隐藏文字');
                    }                   
                })
            });
        </script>
    </body>
</html>

jQuery水果列表中添加删除元素

append 添加元素
remove 删除元素
attr 添加属性名和属性内容
text,html 可以在标签中间添加内容，text添加文本，html添加标签

// $('<a>') 可以直接创建元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <ul id="fruits">
                <li>苹果 <a href="javascript:void(0)">删除</a></li>
                <li>香蕉 <a href="javascript:void(0)">删除</a></li>
                <li>橘子 <a href="javascript:void(0)">删除</a></li>
            </ul>
            <input type="text" id="textF"/>
            <input type="button" value='添加' id="buttonF">
        </div>
        <script src="js/jquery.min.js"></script>
        <script>
            $(function() {
                $('#buttonF').on('click', function() {
                    var fruit = $('#textF').val().trim();
                    if (fruit != ''){
                        var aTag = $('<a>').attr('href','javascript:void(0)').text('删除').on('click', removeItem);
                        var liTag = $('<li>').text(fruit).append(aTag);
                        $('#fruits').append(liTag);
                    }                   
                });
                $('#fruits a').on('click', removeItem)
                function removeItem(evt) {
                    $(evt.target).parent().remove();
                }
            })
        </script>
    </body>
</html>