最万能的登录、注册页。带输入数据的验证。邮箱的正则表达式、正则表达式验证输入的数据

看别人写的、不是缺胳膊就是少腿。就离谱、因为看不惯别人写的、所以自己写。界面美化可以按照自己的需求自己设计、这里只是提供了简单的前台数据获取以及输入数据的验证、哈哈哈哈哈哈

登录

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--      引入js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>欢迎登录图书管理系统</title>
</head>

<body style="background-color: aliceblue">

<div class="container" style=" width:1200px;margin-left:550px;margin-top: 150px" >

    <div class="row clearfix" style="align-content: center">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>欢迎登录图书管理系统</small>
                </h1>
            </div>
        </div>
    </div>

    
            <form th:action="@{/login}">

                <div class="form-group">
                    <div class="row" >
                        <div class="col-md-1"><label for="usercount">用户账号 :</label></div>
                        <div class="col-md-3">  <input type="text" placeholder="请输入账号" onblur="return checkCount()" class="form-control" name="username" id="usercount" ></div>
                        <div class="col-md-2"> <span id="tipCount" style="color: red"></span></div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-1"><label for="pwd">用户密码 :</label></div>
                        <div class="col-md-3">  <input type="text" placeholder="请输入密码" onblur="return checkPwd()" class="form-control" name="password" id="pwd" ></div>
                        <div class="col-md-3"> <span id="tipPwd"  style="color: red"></span></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-1">
                        <button type="submit" class="btn btn-default" onclick="return checkform()" >登录</button>
                    </div>
                    <div class="col-md-1">
                        <a class="btn btn-default" th:href="@{/register}" >注册</a>
                    </div>
                    <div class="col-md-1">
                        <a class="btn btn-default" th:href="@{/hello}" >首页</a>
                    </div>
                </div>


            </form>






</div>

<script type="text/javascript">
    var patt1 = /^[0-9]+.?[0-9]*$/;//正则表达式验证是否为纯数字


    //一级验证账号
    function checkCount(){
        var usercount =$("#usercount").val();

        if (usercount == null || usercount == ''){
            $("#tipCount").text("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            $("#tipCount").text("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            $("#tipCount").text("账号长度1-8");
            return  false;
        }else {
            $("#tipCount").text(" ")
        }

    }

    //一级验证姓名
    function checkPwd(){
        var pwd  =$("#pwd").val();
        if (pwd == null || pwd == ''){
            $("#tipPwd").text("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >6){
            $("#tipPwd").text("密码4长度1-6!!!");
            return false;
        }else {
            $("#tipPwd").text(" ");
        }

    }

    //二级验证
    function checkform(){
        var usercount =$("#usercount").val();
        var pwd  =$("#pwd").val();

        if (usercount == null || usercount == ''){
            alert("账号不能为空，请输入账号");
            return false;
        }

        if (pwd == null || pwd == ''){
            alert("密码不能为空!!!");
            return false;
        }




    }

</script>
</body>
</html>

在这里插入图片描述

注册页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--      引入js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>用户注册</title>
</head>

<body style="background-color: aliceblue">


<div class="container" style="margin-left: 550px;width: 1200px;height: 1000px" >

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>欢迎新用户注册</small>
                </h1>
            </div>
        </div>
    </div>

    <form th:action="@{/register}" >

        <div class="form-group">
            <div class="row">
                <div class="col-md-1" ><label for="usercount" >账号 :</label> </div>
                <div class="col-md-3"> <input type="text" placeholder="请输入账号" onblur="return checkCount()"   class="form-control col-md-6 " name="usercount" id="usercount"></div>
                <div class="col-md-2"> <span id="tipCount" style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="name">姓名 :</label></div>
                <div class="col-md-3">  <input type="text" placeholder="请输入姓名" onblur="return checkName()" class="form-control" name="name" id="name" ></div>
                <div class="col-md-3"> <span id="tipName"  style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="pwd">密码 :</label></div>
                <div class="col-md-3">  <input type="text" placeholder="请输入密码" onblur="return checkPwd()" class="form-control" name="pwd" id="pwd" ></div>
                <div class="col-md-3"> <span id="tipPwd"  style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="pwdpre">密码确认 :</label></div>
                <div class="col-md-3">  <input type="text" placeholder="请再次输入密码" onblur="return checkPwdpre()" class="form-control" name="pwd" id="pwdpre" ></div>
                <div class="col-md-3"> <span id="tipPwdpre"  style="color: red"></span></div>
            </div>
        </div>


        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="sex">性别 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="请输入性别" onblur="return checkSex()"  class="form-control" name="sex" id="sex" ></div>
                <div class="col-md-3"> <span id="tipSex"  style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"> <label for="age">年龄:</label></div>
                <div class="col-md-3"><input name="age" placeholder="请输入年龄" onblur="return checkAge()" class="form-control"  id="age"></input></div>
                <div class="col-md-3"> <span id="tipAge"  style="color: red"></span></div>
            </div>
        </div>


        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="email">邮箱 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="请输入邮箱" onblur="return checkEmail()" class="form-control" name="email" id="email" ></div>
                <div class="col-md-3"> <span id="tipEmail" style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="tel">电话 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="亲输入电话" onblur="return checkTel()"  class="form-control" name="tel" id="tel" ></div>
                <div class="col-md-3"> <span id="tipTel" style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="address">家庭地址 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="请输入地址" onblur="return checkAddress()" class="form-control" name="address" id="address" ></div>
                <div class="col-md-4"> <span id="tipAddress" style="color: red"></span></div>
            </div>
        </div>



        <div class="form-group">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-1"> <button type="submit" class="btn btn-default form-control" onclick="return checkform()" >注册</button></div>
                <div class="col-md-1"> <a class="btn btn-default form-control" th:href="@{/toLogin}" >登录</a></div>
                <div class="col-md-1">
                    <a class="btn btn-default" th:href="@{/hello}" >首页</a>
                </div>
            </div>
        </div>


    </form>

</div>



<script type="text/javascript">
    var patt1 = /^[0-9]+.?[0-9]*$/;//正则表达式验证是否为纯数字


    //一级验证账号
    function checkCount(){
        var usercount =$("#usercount").val();

        if (usercount == null || usercount == ''){
            $("#tipCount").text("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            $("#tipCount").text("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            $("#tipCount").text("账号长度1-8");
            return  false;
        }else {
            $("#tipCount").text(" ")
        }

    }

    //一级验证姓名
    function checkName(){
        var name  =$("#name").val();
        if (name == null || name == ''){
            $("#tipName").text("姓名不能为空!!!");
            return false;
        }else if (name.match(patt1)!=null){
            $("#tipName").text("姓名不能纯数字!!!");
            return false;
        }else if (name.length<1 || name.length >6){
            $("#tipName").text("姓名长度1-6!!!");
            return false;
        }else {
            $("#tipName").text(" ");
        }

    }

    //一级验证密码
    function checkPwd(){
        var pwd  =$("#pwd").val();
        if (pwd == null || pwd == ''){
            $("#tipPwd").text("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >8){
            $("#tipPwd").text("密码长度1-8!!!");
            return false;
        }else {
            $("#tipPwd").text(" ");
        }

    }
    //一级验证两次输入的密码是否一致
    function checkPwdpre() {
        var pwd = $("#pwd").val();
        var pwdpre =$("#pwdpre").val();
        if (pwdpre == null || pwdpre == ''){
            $("#tipPwdpre").text("密码不能为空!!!");
            return false;
        }else if(pwd != pwdpre){
            $("#tipPwdpre").text("两次输入的密码不一致!!!");
            return false;
        }else{
            $("#tipPwdpre").text(" ");
        }

    }



    //一级验证性别
    function checkSex(){
        var sex=$("#sex").val();

        if (sex == null || sex == ''){
            $("#tipSex").text("性别不能为空!!!");
            return false;
        }else if (sex === '男'||sex === '女'){
            $("#tipSex").text("");
        }else{
            $("#tipSex").text("请输入正确的性别：男 / 女");
        }
    }




    //一级验证年龄
    function checkAge(){
        var age=$("#age").val();
        if(age == null || age == ''){
            $("#tipAge").text("输入的年龄不能为空！！！");
            return false;
        }else if (age.match(patt1)==null){
            $("#tipAge").text("输入的年龄不合法！！！");
            return  false;
        }else if (age <0 || age > 150){
            $("#tipAge").text("请输入合法的年龄：0-150岁！！！");
            return false;
        }else{
            $("#tipAge").text(" ");

        }


    }
    //一级验证邮箱
    function checkEmail(){
        var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        var email =$("#email").val();
        if (email == null || email == ''){
            $("#tipEmail").text("输入的邮箱为空！！！");
            return false;
        }else if (email.match(re) == null){
            $("#tipEmail").text("请输入合法的邮箱：例如（zha@qq.com)");
            return false;
        }else{
            $("#tipEmail").text(" ");
        }

    }

    //一级验证手机号
    function checkTel(){
        var re = /^1\d{10}$/;
        var tel= $("#tel").val();
        if (tel == null || tel ==''){
            $("#tipTel").text("输入的手机号为空！！！");
            return false;
        }else if (tel.match(re) == null){
            $("#tipTel").text("输入的手机号不合法！！！");
            return false;
        }else{
            $("#tipTel").text(" ");
        }

    }


    //一级验证地址
    function checkAddress(){
        var address=$("#address").val();
        var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

        if (address == null || address ==''){
            $("#tipAddress").text("家庭地址不能为空！！！");
            return false;
        }else if (address.match(patt1) != null){
            $("#tipAddress").text("家庭地址不能为纯数字，请输入正确的家庭地址");
            return false;
        }else{
            $("#tipAddress").text(" ");
        }

    }




    //二级验证
    function checkform(){

        var re = /^1\d{10}$/;
        var re1 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        var pwd =$("#pwd").val();
        var pwdpre =$("#pwdpre").val();
        var usercount =$("#usercount").val();
        var name  =$("#name").val();
        var sex=$("#sex").val();
        var age=$("#age").val();
        var email =$("#email").val();
        var tel= $("#tel").val();
        var address=$("#address").val();

        if (usercount == null || usercount == ''){
            alert("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            alert("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            alert("账号长度1-8");
            return  false;
        }

        if (name == null || name == ''){
            alert("姓名不能为空!!!");
            return false;
        }else if (name.match(patt1)!=null){
            alert("姓名不能纯数字!!!");
            return false;
        }else if (name.length<1 || name.length >6){
            alert("姓名长度1-6!!!");
            return false;
        }

        if (pwd == null || pwd == ''){
            alert("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >8){
            alert("密码长度1-8!!!");
            return false;
        }

        if (pwdpre == null || pwdpre == ''){
            alert("密码不能为空!!!");
            return false;
        }else if (pwdpre.length<1 || pwdpre.length >8){
            alert("密码长度1-8!!!");
            return false;
        }

        if (sex == null || sex == ''){
            alert("性别不能为空!!!");
            return false;
        }else if (sex === '男'||sex === '女'){

        }else{
            alert("请输入正确的性别：男 / 女");
            return  false;
        }

        if(age == null || age == ''){
            alert("输入的年龄不能为空！！！");
            return false;
        }else if (age.match(patt1)==null){
            alert("输入的年龄不合法！！！");
            return  false;
        }else if (age <0 || age > 150){
            alert("请输入合法的年龄：0-150岁！！！");
            return false;
        }

        if (email == null || email == ''){
            alert("输入的邮箱为空！！！");
            return false;
        }else if (email.match(re1) == null){
            alert("请输入合法的邮箱：例如（zha@qq.com)");
            return false;
        }

        if (tel == null || tel ==''){
            alert("输入的手机号为空！！！");
            return false;
        }else if (tel.match(re) == null){
            alert("输入的手机号不合法！！！");
            return false;
        }

        if (address == null || address ==''){
            alert("家庭地址不能为空！！！");
            return false;
        }else if (address.match(patt1) != null){
            alert("家庭地址不能为纯数字，请输入正确的家庭地址");
            return false;
        }



    }
</script>



</body>
</html>

在这里插入图片描述

posted on 2022-08-28 22:19  热爱技术的小郑  阅读(43)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 热爱技术的小郑
Powered by .NET 9.0 on Kubernetes