js入门学习

js的用途

js是对网页的操作，分为网页操作BOM，以及对于页面的操作DOM

BOM操作

• console
• alert
• confirm

DOM操作对标签的操作
document对象，getElementById（标签当中的id值）

事件的绑定

• 得到一个标签框的对象那个
• 对象.时间=函数方法 el.οnblur=checkPassword;
• 建立函数方法

表单的相关操作

<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;
    function checkUsername() {
    //    获取输入的值 trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。
        var username = usernameInput.value.trim();
    //    定义一个正则
        var re=/^\w{6,12}$/;
        //接收一个标志位
        var flag = re.test(username);
        if (flag){
            document.getElementById("username_err").style.display='none';
        }else{
            document.getElementById("username_err").style.display='';

        }return flag;

    }


    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var el = document.getElementById("password");
    //与小时焦点事件进行绑定
    el.onblur=checkPassword;


document.get
    function checkPassword() {
        // 得到输入的值
        var elValue = el.value.trim();
        //定义一哥正则
        var cc=/^\w{6,12}$/
        var q = cc.test(elValue);
        if (q){
            document.getElementById("password_err").style.display='none';

        }else {
            document.getElementById("password_err").style.display='';

        }
        return q;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1

        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }


    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件  进行校验  当三者单位1获者都不为0是成立
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }

</script>

进行表单的校验

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" onblur="checkUsername()">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" onblur="checkPassword()">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>