js 表单验证基本

最新推荐文章于 2023-11-08 16:24:10 发布

weize_hh

最新推荐文章于 2023-11-08 16:24:10 发布

阅读量370

点赞数 1

分类专栏：笔记文章标签： javascript html

本文链接：https://blog.csdn.net/weize_hh/article/details/109990771

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

验证：

用户名不能为空

用户名长度6-10位

密码不能为空

密码不能少于6位

确认密码需一致


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>

    </style>
</head>
<body>
    <!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
    <form name="userForm" method="post" action="https://www.baidu.com/" onsubmit="return checkForm()">
        <label for="username">用户名: </label>
        <input type="text" id="username" name="username" onblur="checkUsername()" onfocus="clearNameError()"/>
        <span id="nameError"></span><br/>


        <label for="userpsd">密码: </label>
        <input type="password" id="userpsd" name="userpsd" onblur="checkUserpsd()" onfocus="clearPsdError()"/>
        <span id="psdError"></span><br/>


        <label for="confirmpsd">确认密码: </label>
        <input type="password" id="confirmpsd" name="confirmpsd" onblur="isSame()" onblur="clearConfirmPsdError()"/>
        <span id="confirmPsdError"></span><br/>

        <input type="submit" value="注册">
    </form>

    <script>
        String.prototype.trim = function(){
            // return this.replace(/^\s+/,"").replace(/\s+$/,"");
            return this.replace(/^\s+|\s+$/gm,'');
        };
        function checkUsername(){
            var usernameValue = document.getElementById('username').value;
            var username = usernameValue.trim();
            var nameError = document.getElementById("nameError");
            if(username == ''){
                nameError.innerHTML = ' <font color="red">用户名不能为空！</font>'
                return false;
            }else if(username.length<6||username.length>10){
                nameError.innerHTML = ' <font color="red">用户名长度为6-10位！</font>';
                return false;
            }else{
                nameError.innerHTML='';
                return true;
            }   
        }



        function checkUserpsd(){
            var password = document.getElementById('userpsd').value;
            var psdError = document.getElementById("psdError");
            if(password == ''){
                psdError.innerHTML = '<font color="red">密码不能为空！</font>';
                return false;
            }else if(password.length < 6){
                psdError.innerHTML = '<font color="red">密码不能少于6位！</font>';
                return false;
            }else{
                psdError.innerHTML = '';
                return true;
            }
        }

        function clearNameError(){
            var nameError = document.getElementById("nameError"); 
            nameError.innerHTML = '';
        }

        function clearPsdError(){
            var nameError = document.getElementById("userpsd"); 
            psdError.innerHTML = '';

        }

        function isSame(){
            var confirmpsd = document.getElementById('confirmpsd').value;
            var userpsd = document.getElementById('userpsd').value;
            var confirmPsdError = document.getElementById('confirmPsdError');

            if(confirmpsd!=userpsd){
                confirmPsdError.innerHTML = '<font color="red">密码不一致</font>';
                return false;
            }else{
                confirmPsdError.innerHTML = '';
                return true;
            }


        }

        function clearConfirmPsdError(){
            var confirmPsdError = document.getElementById('confirmPsdError');
            confirmPsdError.innerHTML = '';
        }


        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserpsd();
            var flag3 = isSame();

            return flag1&&flag2&&flag3;
        }
  
    </script>
</body>
</html>

效果：

表单验证

补充扩展：

1.使用正则表达式

2.使用表格来对齐表单

weize_hh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js 表单验证基本

验证：用户名不能为空用户名长度6-10位密码不能为空密码不能少于6位确认密码需一致<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <style> </style></head>&...
复制链接

扫一扫