表单

1.表单

1.1 快速获取表单元素

//1.DOM快速获取表单元素  表单.name名称
console.log(oForm.user); //输入框 用户名
console.log(oForm.password); //输入框 密 码

console.log(oForm.sex); //[input, input, value: "女"]
console.log(oForm.sex.value);

1.2 表单事件方法

• 表单事件

  • oForm.onsubmit : 表单提交事件

    ​ return true : 默认，允许提交

    ​ return false： 阻止提交

  • oForm.onreset : 表单重置事件

    ​ return true：默认 允许重置

    ​ return false：阻止重置

    //点击提交按钮，如果用户名为空，不能提交
    oForm.onsubmit = function () {
        if (oForm.user.value == "") {
            alert("请输入用户名");
            return false;
        }
    }
    //2.oForm.onreset  : 表单重置事件
    oForm.onreset = function () {
        //confirm(确认信息) 带确认的对话框  true--确定    false---取消
        /* var is = confirm("是否重置");
                console.log(is); */
    
        return confirm("是否重置");
    }
    

• 表单元素事件

  • oIn.onfocus : 获取焦点

  • oIn.onblur : 失去焦点

    //3.获得焦点  表单元素.onfocus
    oForm.user.onfocus = function () {
        this.style.borderColor = "red";
    }
    
    //4.失去焦点 表单元素.onblur
    oForm.user.onblur = function () {
        this.style.borderColor = "#ccc";
    }
    

  • oIn.oninput/oIn.onpropertychange : 输入框发生改变的时候实时触发

    oninput：ie低版本不兼容

    onpropertychange：ie浏览器

    //5.oIn.oninput : 输入框发生改变的时候实时触发
    oForm.user.oninput = mim;
    oForm.user.onpropertychange = mim;
    function mim(){
        //6位以上弱  9位以上中  12-24强    密码需要在6-24位之间
        if (this.value.length >= 12 && this.value.length <= 24) {
            oSpan.innerHTML = "强";
            oSpan.style.color = "green";
        } else if (this.value.length >= 9&&this.value.length < 12) {
            oSpan.innerHTML = "中";
            oSpan.style.color = "orange";
        } else if (this.value.length >= 6&&this.value.length < 9) {
            oSpan.innerHTML = "弱";
            oSpan.style.color = "red";
        }else{
            oSpan.innerHTML = "密码需要在6-24位之间";
            oSpan.style.color = "#ccc";
        }
    }
    

  • onchange: 失去焦点时，内容发生变化时触发

    oForm.user.onchange = function(){
        console.log(this.value);
    }
    
    

• 自动获得焦点方法 oIn.focus();