表单校验文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <div class="main_box">
            <div class="box">
                <form>
                    用户名:<input class="id" type="text"><br> 邮&emsp;箱:
                    <input class="email" type="text"><br> 地&emsp;址:
                    <input class="adress" type="text"><br> 密&emsp;码:
                    <input class="pwd" type="password"><br>
                    <button type="button" class="button">注&emsp;&emsp;&emsp;册</button>
                </form>
            </div>
        </div>

        <style type="text/css">
            span {
                color: white;
            }
            .main_box {
                width: 100%;
                height: 910px;
                background-color: #000000;
                
            }
            .title {
                font-size: 5em;
                color: white;
                width: 100%;
                height: 100px;
                text-align: center;
            }
            .box {
                width: 1050px;
                height: 310px;
                margin: 150px auto 50px auto;
                padding-left: 360px;
            }
            input {
                height: 40px;
                width: 200px;
                border-radius: 20px;
                border: solid 1px #B5B5B5;
                margin: 10px;
                font-size: 1.2em;
            }
            form {
                color: white;
                font-size: 1.2em;
                float: left;
                margin-left: 50px;
            }
            .button {
                width: 280px;
                height: 40px;
                background-color: #9781FD;
                border-radius: 25px;
                color: white;
                font-size: 1.3em;
                font-weight: 700;
                margin-top: 10px;
            }
            .img {
                width: 310px;
                height: 310px;
                float: left;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                var tip1 = "<span class='span1'>用户名不能为空!</span>"; //声明发生错误时在输入框后面添加的span
                var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>";
                var tip3 = "<span class='span3'>地址不能为空!</span>";
                var tip4 = "<span class='span4'>密码长度不能小于五位且最多为十位 !</span>";
                var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; //声明判定邮箱格式的条件
                $(".id").blur(function() {
                    if(!$(".id").val()) { //判定用户名非空
                        $(".span1").remove();
                        $(".id").after(tip1);
                    } else {
                        $(".span1").remove();
                    }
                });
                $(".email").blur(function() {

                    if(!condition.test($(".email").val())) { //判定邮箱格式
                        $(".span2").remove();
                        $(".email").after(tip2);
                    } else {
                        $(".span2").remove();
                    }

                });
                $(".adress").blur(function() {
                    if(!$(".adress").val()) { //判定地址非空
                        $(".span3").remove();
                        $(".adress").after(tip3);
                    } else {
                        $(".span3").remove();
                    }
                });
                $(".pwd").blur(function() {

                    if($(".pwd").val().length < 5 || $(".pwd").val().length > 10) { //判定密码长度不能小于5位且不能大于10位
                        $(".span4").remove();
                        $(".pwd").after(tip4);
                    } else {
                        $(".span4").remove();
                    }
                });
                $(".button").click(function() { //符合所有条件则弹出弹窗表单验证通过，如果不符合则弹出弹窗提醒用户更改
                    if(!$(".id").val() || !condition.test($(".email").val()) || !$(".adress").val() || $(".pwd").val().length < 5 || $(".pwd").val().length > 10) {
                        alert("注册信息有误，请更改个人信息");
                    } else {
                        alert("注册成功");
                    }
                })
            })
        </script>
    </body>

</html>
相关阅读:
代码守恒定律
 第一个Dockerfile
服务器项目白名单设置
 TOMCAT禁用不安全请求方式
 标准单例模式
 二进制,八进制,十进制,十六进制！！！！
JAVA按层级遍历二叉树
 String的+
安装 Rational Rose 启动报错：无法启动此程序，因为计算机中丢失 suite objects.dll
java中文乱码问题
原文地址：https://www.cnblogs.com/shandayuan/p/16252735.html