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

已于 2022-06-22 08:54:51 修改
阅读量1.6k 收藏 16
点赞数 4
文章标签： 排序算法 java 算法
于 2021-11-16 23:18:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43304253/article/details/121367887
版权

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

登录

<!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>

在这里插入图片描述

Mr.Aholic
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
万能邮箱免安装版
05-24
万能邮箱免安装版，绿色版。。。。。。。。。。。。。。。。。。。。
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步：对用户输入的数据进行判断 第四步：数据合法(让表单提交) 第五步：数据非法(给出错误提示信息，不让表单提交) 问题：如何控制表单提交？ 关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。 onsubmit = return checkForm() 2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
使用js实现简单版用户登录表单验证(结合正则表达式
爬楼梯的前端小白的博客
01-20 3073
使用js实现简单版用户登录表单验证，确认密码一致
JavaScript登录注册账户名密码邮箱等用正则表达式校验。
Jason Z的博客
08-05 1240
JavaScript登录注册账户名密码邮箱等用正则表达式校验。 直接上代码 如果有解释不对的地方，或者错误的地方，请留言。 其中正则表达式具体的根据自己的需求更换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="te
JavaScript 登录注册表单验证（含正则表达式）
阿博的博客
07-25 2061
JavaScript 登录注册表单验证（含正则表达式）
js实现登录邮箱
fonyer的博客
11-23 7184
1、send.js  （复制以下代码另存为send.js文件） function clickMail(){var gm=document.gomailvar vDomain=gm.domainsvar vName=gm.uNamevar vPw=gm.uPwif(vDomain.value==""){alert("您没有选择邮箱！")vDomain.focus()return false}if(...
html+css+js基础部分，学习与制作一个简单的登录注册功能页面
weixin_61044714的博客
11-19 6564
html+css+js基础学习，制作一个简单的登录注册页面
Java使用正则表达式对注册页面进行验证功能实现
10-21
本文给大家分享一段有关java使用正则表达式对注册页面进行验证的代码，代码比较简单，非常不错，感兴趣的朋友一起学习吧
JS正则表达式 验证邮箱登入 分析
01-08
js正则表达式 验证邮箱登入 #emailError { color: red; } [removed] = function() { /* 分析： 0.给提交按钮绑定时间 1.先获取 用户输入框的值 2.写正则表达式 3.用正则表达式...
JS表单数据验证的正则表达式(常用)
10-20
主要介绍了JS表单数据验证的正则表达式,这种方法比较常用，以及使用正则表达式验证表单的方法，本文给大家介绍非常详细，需要的的朋友参考下
正则表达式–QQ微信、优酷前端 邮箱正则表达式验证 Bug
12-13
拿邮箱验证来说，网上绝大部分人写的邮箱验证正则表达式代码都不能验证这邮箱： [email protected]，也不能验证 [email protected] 。 上次我发现youku.com（优酷网）用户注册就有这个问题，见图：   ...
使用正则表达式验证登录页面输入是否符合要求
12-13
先给大家展示下效果图： 废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>... var regstr = /^[\u
B008-方法参数传递&可变参数&工具类
窗外有风景，笔下有前途，低头是题海，抬头是未来
04-20 334
方法参数传递&可变参数&工具类
椋鸟数据结构笔记#10：排序·中
椋鸟的博客小窝
04-20 733
萌新的学习笔记，写错了恳请斧正。
一个基于更新频率和卡片等级、浏览量的动态推荐排序算法
路辉的博客
04-23 484
可以看到这个算法本身的逻辑并不难，它的难点在于如何分析出合理的参数，要基于当前系统的数据情况，未来业务的发展预期和想要达到的推荐效果，来得到算法的参数。
常见的七种排序
m0_61731585的博客
04-20 735
插入排序，希尔排序，选择排序，堆排序，冒泡排序，快速排序，归并排序
string模拟实现
m0_73969414的博客
04-23 752
c++中string的模拟实现，面试必会知识点
实现自定义注解、实现自定义幂等性注解
最新发布
qq_44721738的博客
04-23 117
添加 Spring AOP 依赖。创建自定义注解。创建一个新的 Java 注解类，通过@interface关键字来定义，并可以添加元注解以及属性。@Target(ElementType.METHOD) //表示作用于方法上@Retention(RetentionPolicy.RUNTIME) // 表示这个注解在运行时是可见的，这样 AOP 代理才能在运行时读取到这个注解编写 AOP 拦截（自定义注解）的逻辑代码。@Aspect@Component// 方法执行前的处理。
2.8 构建gradle环境
蚊者逆袭的博客
04-18 2209
Gradle是一种现代化的构建工具，用于自动化地构建、测试和部署软件项目。它是一种基于JVM（Java虚拟机）的构建工具，最初是为了解决Apache Ant和Apache Maven等传统构建工具的一些限制而开发的。
js邮箱正则表达式验证
11-01
正则表达式是一种用于匹配字符串的模式，可以用来验证输入的数据是否符合特定的格式要求。在这个例子中，使用了一个正则表达式来验证邮箱格式是否正确。具体来说，这个正则表达式的含义是：以字母或数字开头，后面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.Aholic

整理不易、多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值