js中form表单的简单封装

最新推荐文章于 2024-03-08 23:07:05 发布

mischen520

最新推荐文章于 2024-03-08 23:07:05 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/miachen520/article/details/51889319

javascript 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一个简单的JavaScript表单验证封装方法，包括用户名和密码的验证逻辑。通过正则表达式检查输入是否符合规则，并利用自定义的DOM操作辅助函数实现了表单提交前的即时反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中form表单的简单封装

HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="util.js"></script>
    <script>
        //验证用户名
        function valiUname(unameObj){
            var val=unameObj.value;
            var reg=new RegExp("^\\w{6,12}$");
            var result=reg.test(val);
            var unameMsg=$("#unameMsg");
            if(!val){
                unameMsg.innerHTML="用户名不能为空";
                return false;
            }else if(!result){
                unameMsg.innerHTML="用户名只能由6-12位字母数字下划线组成";
                return false;
            }else{
                unameMsg.innerHTML="";
                return true;
            }
        }
        //验证密码
        function valiPwd(pwdObj){
            var val=pwdObj.value;
            var reg=new RegExp("^[a-zA-Z0-9]{6,12}$");
            var result=reg.test(val);
            var pwdMsg=$("#pwdMsg");
            if(!val){
                pwdMsg.innerHTML="密码不能为空";
                return false;
            }else if(!result){
                pwdMsg.innerHTML="密码只能由6-12位字母数字下划线组成";
                return false;
            }else{
                pwdMsg.innerHTML="";
                return true;
            }
        }
        function formSub(){
            return valiUname($("uname")[0])&&valiPwd($("pwd")[0]);
        }
    </script>
</head>
<body>
    <form action="#" method="get" name="form1" onsubmit="return formSub()">
        用户名:<input type="text" name="uname" onchange="valiUname(this)"/>
        <span id="unameMsg"></span><br/>
        密码:<input type="password" name="pwd" onchange="valiPwd(this)"/>
        <span id="pwdMsg"></span><br/>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

js代码：

/**
 *
 * @param idOrName  如果传入id  前面加上#   如果传入name  直接传入
 * @returns {*}  返回元素节点  如果没找到 返回null
 */
function $(idOrName){
    var obj=null;
    if(idOrName){
        if(idOrName.charAt(0)=="#"){
            obj=document.getElementById(idOrName.substring(1));
        }else{
            obj=document.getElementsByName(idOrName);
        }
    }
    return obj;
}
/**
 *
 * @param parentNode  父节点
 * @returns {Array}  所有的元素子节点
 */
function getChildNodes(parentNode){
    var childs=parentNode.childNodes;
    var newChilds=[];
    for(var i=0;i<childs.length;i++){
        if(childs[i].nodeType==1){
            newChilds.push(childs[i]);
        }
    }
    return newChilds;
}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   第一个元素节点
 */
function getFirstChild(parentNode){
    var firstChild=parentNode.firstChild;
    if(firstChild.nodeType==3){
        firstChild=firstChild.nextSibling;
    }
    return firstChild;

}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   最后一个元素节点
 */
function getLastChild(parentNode){
    var lastChild=parentNode.lastChild;
    if(lastChild.nodeType==3){
        lastChild=lastChild.previousSibling;
    }
    return lastChild;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回下一个兄弟元素节点
 */
function getNextSibling(node){
    var nextNode=node.nextSibling;
    if(nextNode.nodeType==3){
        nextNode=nextNode.nextSibling;
    }
    return nextNode;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回前一个兄弟元素节点
 */
function getPreviousSibling(node){
    var preNode=node.previousSibling;
    if(preNode.nodeType==3){
        preNode=preNode.previousSibling;
    }
    return preNode;
}