js实现表单验证

最新推荐文章于 2024-04-20 14:59:10 发布

无猿。

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量225

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/L_3995/article/details/107217375

版权

html+css代码

    .wrapBox {
        width: 600px;
        margin: 50px auto;
        min-height: 500px;
        background-color: #FFCCCC;
    }

    .wrapBox button {
        padding: 5px;
        margin-bottom: 50px;
    }

    .wrapBox table {
        border-collapse: collapse;
        width: 100%;
        line-height: 30px;
        text-align: center;
        table-layout: fixed;
    }

    .wrapBox table,
    .wrapBox th,
    .wrapBox td {
        border: 1px solid #000;
    }

    /* 遮罩层 */
    .shadow {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
    }

    .shadow .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #FF9999;
        padding: 20px;
        color: #fff;
    }

    .shadow .box p {
        margin: 10px 0;
    }

新增

用户名	密码	编辑	删除

用户名:

密码:

js代码
var addBtn = getEle(’.add’);
var conBtn = getEle(’.subBtn’);
var canBtn = getEle(’.cancelBtn’);
var shadow = getEle(’.shadow’);
var inp1 = getEle(’#user’);
var inp2 = getEle(’#pwd’);
var tb = getEle(’.userlist’);
var flag = 1;
var _this = null;
//绑定新增按钮
addBtn.onclick = function () {
shadow.style.display = ‘block’;
}
//绑定确定按钮
conBtn.onclick = function () {
if (flag) {
addInfo();
} else {
editInfo();
}
}

    function editInfo() {
        var a1 = inp1.value;
        var a2 = inp2.value;
        shadow.style.display = 'none';
        inp1.value = '';
        inp2.value = '';
        _this.previousSibling.previousSibling.innerHTML = a1;
        _this.previousSibling.innerHTML = a2;
        flag = 1;
    }

    function addInfo() {
        var a = inp1.value;
        var b = inp2.value;
        shadow.style.display = 'none';
        inp1.value = '';
        inp2.value = '';
        var tr = document.createElement('tr')
        var td1 = document.createElement('td')
        var txt1 = document.createTextNode(a)
        td1.appendChild(txt1);
        tr.appendChild(td1);

        var td2 = document.createElement('td');
        var txt2 = document.createTextNode(b);
        td2.appendChild(txt2);
        tr.appendChild(td2);

        var td3 = document.createElement('td')
        var txt3 = document.createTextNode('编辑')
        td3.appendChild(txt3);
        tr.appendChild(td3);

        var td4 = document.createElement('td')
        var txt4 = document.createTextNode('删除')
        td4.appendChild(txt4);
        tr.appendChild(td4);

        tb.appendChild(tr);

        td4.onclick = function () {
            tr.style.display = 'none'
        }

        td3.onclick = function () {
            console.log(this)
            shadow.style.display = 'block';
            var c = this.previousSibling.previousSibling.innerHTML;
            var d = this.previousSibling.innerHTML;
            inp1.value = c;
            inp2.value = d;
            flag = 0;
            _this = this;
        }
    }
    //绑定取消按钮
    canBtn.onclick = function () {
        shadow.style.display = 'none';
        inp1.value = '';
        inp2.value = '';
        flag = 1;
    }




    function getEle(ele) {
        return document.querySelector(ele);
    }