js表单、正则和元素节点

1.表单

onsubmit:表单中的确定按钮被点击时发生的事件.
onfoucs:在对象获得焦点时发生的事件.
onblur:在对象失去焦点时发生的事件.
onchange()： 事件也可用于单选框与复选框改变后触发的事件。
简单的表单验证的js代码：

<script>
    var peg = {
        id: function (obj) {
            var value = obj.value;
            var error = obj.parentElement.children[2];
            if (!value) {
                error.innerHTML = "<span class='errinfo'>*账号不能为空！</span>";
            }
        },
        pwd: function (obj) {
            var value = obj.value;
            var error = obj.parentElement.children[2];
            if (!value) {
                error.innerHTML = "<span class='errinfo'>*密码不能为空！</span>";
            }
            else {
                error.innerHTML = "<span class='success'>*正确</span>";
                if (obj.getAttribute("data-new") == "pwdold") {
                    var v1 = document.querySelector("#pwdone").value;
                    var v2 = obj.value;
                    if (v1 != v2) {
                        error.innerHTML = "<span class='errinfo'>*两次密码不一致！</span>";
                    }
                }
            }
        },
        email: function (obj) {
            var value = obj.value;
            var error = obj.parentElement.children[2];
            if (!value) {
                error.innerHTML = "<span class='errinfo'>*邮箱不能为空！</span>";
            }
            else {
                if (value.indexOf("@") == -1 || value.indexOf(".") == -1) {
                    error.innerHTML = "<span class='errinfo'>*邮箱格式不正确！</span>";
                }
            }
        },
        age: function (obj) {
            var value = obj.value;
            var error = obj.parentElement.children[2];
            if (!value) {
                error.innerHTML = "<span class='errinfo'>*年龄不能为空！</span>";
            }
        },
        tel: function (obj) {
            var value = obj.value;
            var error = obj.parentElement.children[2];
            if (!value) {
                error.innerHTML = "<span class='errinfo'>*电话不能为空！</span>";
            }
            else {
                error.innerHTML = "<span class='success'>*正确</span>";
                if (value.length != 11) {
                    error.innerHTML = "<span class='errinfo'>*电话格式不正确,要求手机号11位！</span>";
                }
            }
        },
        add: function (obj) {
            var value = obj.value;
            var error = obj.parentElement.children[2];
            if (!value) {
                error.innerHTML = "<span class='errinfo'>*住址不能为空！</span>";
            }
        }
    }
    var subform = document.getElementById("sub");
    var subbtn = document.getElementById("subbtn");
    var ipt = document.getElementsByClassName("ipt");
    for (var i = 0; i < ipt.length; i++) {
        ipt[i].onblur = function () {
            peg[this.name](this);
        }
    }
    subform.onsubmit = function () {
        for (var i = 0; i <= ipt.length; i++) {
            if (i != ipt.length) {
                ipt[i].focus();
            }
            else {
                subbtn.focus();
            }
        }
        var length=document.getElementsByClassName("errinfo").length;
        if(!length){
            return true;
        }
        return false;
    }
</script>

2.正则
match()：验证成功返回的是值，失败返回的是null；

var s = "13201659552";
s.match()

test()：返回的是true或false；

^ , $：标记表达式的开始位置和结束位置（也可以不用写）.
\d ：匹配的是一个数字 [0-9]
\D ：匹配的是非数字 [^0-9]
\s ：匹配空白字符 [\r\n\t\f\v]
\S ：匹配非空白字符 [^\r\n\v\f\t]
\w ：匹配数字 字母 下划线 [0-9a-zA-Z_]
\W ：匹配非数字 字符 下划线 [^0-9a-zA-Z_]
* ：表示匹配前面的子表达式 零次或多次；
+ ：表示匹配前面的子表达式 1次或者多次；
？：表示匹配前面的子表达式0次或者1次；

var c="1044248940@qq.com";
console.log(c.match(/^\w{10}(@)(qq|163|126|sina)(.)(com|cn)$/));

var d="aaa33err4ef";
console.log(d.replace(/\d/g,"t"));
console.log(d.replace(/\w/g,"9"));

/*身份证*/
var s="61032419891012131x";
console.log(s.match(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/));

3.节点

3.1.在 HTML DOM中,每一个元素都是 节点:
(1).文档是一个文档节点。
(2)所有的HTML元素都是元素节点。
(3)所有 HTML 属性都是属性节点。
(4)文本插入到 HTML 元素是文本节点。are text nodes。
(5)注释是注释节点

1.document.createAttribute()创建一个属性节点；

var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);

2.document.createElement()创建一个元素节点；

var btn=document.createElement("BUTTON");

3.document.documentElement返回文档的根节点；

HTML 文档返回对象为HTML元素。
注意： 如果 HTML 元素缺失，返回值为 null。