JavaScript零基础入门--笔记动力节点最新老杜(六）全套笔记精髓

听~宇

已于 2022-05-14 09:36:42 修改

阅读量284

点赞数

分类专栏：前端三件套文章标签： java

于 2022-04-10 15:29:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_47518713/article/details/124078836

版权

表单验证

（1）用户名不能为空
           （2）用户名必须在6-14位之间
           （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
           （4）密码和确认密码一致，邮箱地址合法。
           （5）统一失去焦点验证
           （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
           （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
           （8）最终表单中所有项均合法方可提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){
            // 获取username的span标签
            var usernameErrorSpan = document.getElementById("usernameError");
            // 给用户名文本框绑定blur事件
            var usernameElt = document.getElementById("username");
            usernameElt.onblur = function(){
                // 获取用户名
                var username = usernameElt.value;
                // 去除前后空白
                username = username.trim();
                // 判断用户名是否为空
                /*
                if(username){
                    // 代表username不是空字符串
                    alert("username = " + username);
                }else{
                    // 代表username是空字符串
                    alert("username是空字符串");
                }
                */
                // if(username.length == 0){}
                if(username === ""){
                    // 用户名为空
                    usernameErrorSpan.innerText = "用户名不能为空";

最低0.47元/天解锁文章