JavaScript表单验证

清晨喂

已于 2022-03-05 18:20:25 修改

阅读量164

点赞数 2

文章标签： javascript 正则表达式

于 2022-03-04 17:12:40 首次发布

本文链接：https://blog.csdn.net/m0_63772104/article/details/123281162

版权

"本文介绍了前端开发中表单验证的重要性和方法，包括正则表达式的使用，如d、D、w、W等，以及简单的必填项验证。通过onkeyup事件实现字数限制，确保用户名和密码长度在3-6个字符之间，并实时显示反馈信息。同时，讨论了用户名和密码规则的设定，强调了长度要求的重要性。"

摘要由CSDN通过智能技术生成

大家好，我又来了，今天给大家分享的是一系列表单验证的操作

表单验证

正则验证

我们给输入框加规则需要用正则来进行判断，所以我们先来回顾一下正则验正
内容
\d 数字[0-9] 注意:记住是反斜杠
\D非数字^ [0-9]
\w数字英文下划线[0-9a-zA-Z]
\W非数字英文下划线^ [0-9a-zA-Z]
. 任意字符
次数
？0-1次
+至少一次
*任意次
{5}五个数字
{5，10}最少五次，最多十次
注意事项
规则必须以/^开头以&/结尾
写的时候不要写两根\，只需要一根\

简单验证

写出未填写提示

<body>
		<form action="" id="myForm">
			<p>名字:<input type="text" id="userName" required=""/></p>
			<p>密码:<input type="text" id="usernPwd" required=""/></p>
			<p>邮箱:<input type="text" id="userEmail" required=""/></p>
			<p>
				<button>登陆</button>
			</p>
		</form>
		</body>

效果:
在这里插入图片描述

添加字数限制

<form action="" id="myForm">
    <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>
        <button>登录</button>
    </p>
</form>
<script>

    //用来检查名字是否合规
    function checkLabel(obj) {
        var length = obj.value.length
        // var label=obj.nextElementSibling
        var label = obj.parentElement.getElementsByClassName("error")[0]
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                label.textContent = "😊"
                return true
            }
            //不在区间之内
            label.textContent = "长度必须在3-6之间"
            return false
        }
        //里面没有内容
        label.textContent = "长度必须大于0"
        return false
    }

    //用来检查名字是否合规
    function checkName() {
        var length = userName.value.length
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                l1.textContent = "😊"
                return true
            }
            //不在区间之内
            l1.textContent = "长度必须在3-6之间"
            return false
        }
        //里面没有内容
        l1.textContent = "长度必须大于0"
        return false
    }

    //用来检查密码是否合规
    function checkPwd() {
        var length = userPwd.value.length
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                l2.textContent = "😊"
                return true
            }
            //不在区间之内
            l2.textContent = "长度必须在3-6之间"
            return false
        }
        //里面没有内容
        l2.textContent = "长度必须大于0"
        return false
    }

    //用来检查邮箱是否合规
    function checkEmail() {
        var length = userEmail.value.length
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                l3.textContent = "😊"
                return true
            }
            //不在区间之内
            l3.textContent = "长度必须在3-6之间"
            return false
        }
        //里面没有内容
        l3.textContent = "长度必须大于0"
        return false
    }

效果如图:
在这里插入图片描述

用户名和密码的规则

有的软件用户名需要两个字以上，所以需要用户名大于等于两个字符，在这里我们就设为3-6个字符

<body>
<!--
为什么需要使用正则!!!! 表单验证
-->
<!--<form action="" onsubmit="return check()">-->
<form action="" id="myForm">
    <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>
        <button>登录</button>
    </p>
</form>
<script>

    //用来检查名字是否合规
    function checkLabel(obj) {
        var length = obj.value.length
        // var label=obj.nextElementSibling
        var label = obj.parentElement.getElementsByClassName("error")[0]
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                label.textContent = "😊"
                return true
            }
            //不在区间之内
            label.textContent = "长度必须在3-6之间"
            return false
        }
        //里面没有内容
        label.textContent = "长度必须大于0"
        return false
    }
    </Script>
    </body>