一个小的注册界面demo

最新推荐文章于 2023-01-18 20:28:33 发布
最新推荐文章于 2023-01-18 20:28:33 发布
阅读量418 收藏
点赞数
文章标签： 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39923392/article/details/78477644
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/book1.css" rel="stylesheet" /> 
        <script src="js/jquery-1.11.1.min.js"></script>
        <script>
            $(function(){
                 //判断用户名
                $("#in1").blur(function(){
                 //$("span").html("aa");
                 var in1 = $("#in1");
                    if(in1.val().length < 3){
                        $("#sp1").css("color","red");
                        $("#sp1").html("用户名输入不正确");
                        $("#in1").css("border-color","red");
                        return;
                    }else{
                        $("#sp1").css("color","green");
                        $("#sp1").html("√");
                        $("#in1").css("border-color","green");
                    }

                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });
                //判断邮箱
                $("#in2").blur(function(){
                        var in2 = $("#in2");
                        var shu=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                        //var ss = /@/;
    //                  if(!/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value))){
    //                      $("#sp2").html("邮箱输入不正确");
    //                      $("#sp2").css("color","red");
    //                      return;
    //                  }else{
    //                      $("#sp2").html("√");
    //                      $("#sp2").css("color","green");
    //                  }
                    if(!in2.val().match(shu)){//判断是否加入 @ 符号
                        $("#sp2").html("邮箱输入不正确");
                        $("#sp2").css("color","red");
                        $("#in2").css("border-color","red");
                        return;
                    }else{
                        $("#sp2").html("√");
                        $("#sp2").css("color","green");
                        $("#in2").css("border-color","green");
                    }
                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });

                //判断手机号
                $("#in3").blur(function(){
                    var in3 = $("#in3");
                    if(in3.val().length != 11){//长度必须为11位
                        $("#sp3").html("邮箱输入不正确");
                        $("#sp3").css("color","red");
                        $("#in3").css("border-color","red");
                        return;
                    }else{
                        $("#sp3").html("√");
                        $("#sp3").css("color","green");
                        $("#in3").css("border-color","green");
                    }
                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });

                //判断身份证号
                $("#in4").blur(function(){
                    var in4 = $("#in4");
                    if(in4.val().length != 18){//长度必须为18位
                        $("#sp4").html("邮箱输入不正确");
                        $("#sp4").css("color","red");
                        $("#in4").css("border-color","red");
                        return;
                    }else{
                        $("#sp4").html("√");
                        $("#sp4").css("color","green");
                        $("#in4").css("border-color","green");
                    }
                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });

                $("#in5").click(function(){
                    var in1 = $("#in1");
                    if(in1 == true){
                        alert("aa");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="d1">
            姓名：<input id="in1"/><span style="margin-left: 5px;" id="sp1"></span><br />
            Email地址：<input  type="email" id="in2"/><span style="margin-left: 5px;" id="sp2"></span><br />
            手机号：<input  type="number"  id="in3"/><span style="margin-left: 5px;" id="sp3"></span><br />
            身份证号：<input   id="in4"/><span style="margin-left: 5px;" id="sp4"></span><br />
            <input type="submit" value="提交"  id="in5"/><br />
        </div>
    </body>
</html>
Gemini_骑士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
注册页面Demo(servlet)
thing15636的博客
07-29 618
思路：创建表单页面获取用户输入信息，通过post方式提交到servlet页面，然后通过BeanUtils工具类将获取到的数据封装成domain对象，最后通过register方法将domain对象通过DBUtils和C3P0写入数据库中。 servlet页面代码如下： package register; import java.io.IOException; import java.lang...
注册页面demo
07-27
注册页面的demo
简单注册和登录Demo
07-12
服务器和客服端之间简单的相互通信,对于初学者是很好的练习Demo,客户端通过简单的注册登录,接入到服务器,然后通过服务器返回登录状态.
百度注册页demo
11-28
自己写的纯html的百度注册页面，适合初学者学习css的布局。
Demo0002-登录/注册界面
CnPeng
08-13 410
简单登录界面,仿手机QQ,没有实现具体逻辑,只给出界面, 主要知识点: 1 selector选择器和自定义shape,实现点击登录按钮时背景色的改变 2 取消EditText默认的下划线背景, background="@null" 3 设置EditText的输入行数为单行(用户名和密码的输入肯定要是单行的) 4 密码输入框中,设置EditText的inputType为textpasswo
好看的登录注册界面demo
10-31
总的来说，"好看的登录注册界面demo"是一个结合了HTML5、CSS和JavaScript技术的实例，它展示了如何创建一个既美观又实用的登录注册页面。开发者可以根据自己的需求进行修改和扩展，以适应不同的项目需求。这个资源...
android登录注册界面设计demo
03-09
这个"android登录注册界面设计demo"提供了一个完整的解决方案，包含了登录和注册的功能，以及选择头像的特性。下面将详细介绍这些知识点。 1. **Android布局设计**： Android使用XML文件来定义用户界面布局，例如`...
知乎界面小程序demo
最新发布
05-22
【知乎界面小程序demo】是一个基于特定技术框架构建的软件应用示例，主要目的是展示如何在小程序平台上实现知乎网站的功能和界面交互。这个demo包含了多个界面的切换效果，为开发者提供了学习和参考的模板。 首先，...
Android登录，注册界面简洁Demo
09-01
本"Android登录，注册界面简洁Demo"提供了一个基础的框架，用于演示如何创建直观且功能齐全的用户管理系统。这个Demo的核心在于利用数据库存储和检索用户信息，确保用户数据的安全和有效管理。 首先，我们来看看...
详解Android Studio实现用户登陆界面demo（xml实现）
08-19
1. 在res/layout/activity_main.xml中编写布局内容，创建一个垂直方向的LinearLayout，包含多个控件，如TextView、View和EditText等。 ```xml android:layout_width="match_parent" android:layout_height=...
登录界面demo
08-14
登录demo，很好用的 ，大家快来下载，希望得到大家的支持
仿京东会员注册demo html页面
04-14
仿京东会员注册demo，html文件，用户名，密码，邮箱，手机号验证 js验证。简单的一个仿京东注册表单。
用户登录界面Demo
05-03
一个用户登录界面的小软件，代码均作了注解，可为像我这样的菜鸟来个Demo实例
html简单的注册页面
12-15
很简单的html的网页制作,包含基本的注册功能
用户注册源代码demo
04-19
用户注册代码demo，采用手机号码验证码注册，后台校验，验证码存redis
Vue小demo—美团注册页面
sinat_50265804的博客
02-12 1444
一、目标效果 效果图展示 实现原理 1.输入框聚焦时边框变色 使用CSS的:focus选择器，轻松实现元素聚焦时改变样式。 //用法示例 <!DOCTYPE html> <html> <head> <style> input:focus { background-color:yellow; } </style> </head> <body> <p>在文本框中点击，您会看到黄色的背景：<
python 漂亮界面demo_demo
weixin_39769627的博客
12-03 789
炫彩编程手册更新日期:2020-11-10简介界面库设计器与编程语言结合, 集成化开发, 提高开发效率, 减少工具切换, 减少代码输入, 降低重复工作炫彩编程python风格精简语法, 支持全中文开发,轻量级开发环境, c++运行效率帮助想学编程,又不懂英文的用户帮助业余编程人员学习编程帮助个人开发者简单快速开发软件帮助专业程序员更好的享受编程从入门 ->到进阶 -> 到大神, 适合...
登录注册demo
weixin_49229860的博客
01-18 156
登录注册demo
登陆注册实现demo
11-28
可以实现登陆注册完整流程的demo -(IBAction) login: (id) sender { NSLog(@"in login."); if([txtfldUsername.text isEqualToString:@""]){ [[iToast makeText:@"请输入手机号码"] show]; return; } if([txtfldPassword.text isEqualToString:@""]){ [[iToast makeText:@"请输入密码"] show]; return; } CHStatusBar *statusBar = [[CHStatusBar alloc] initWithFrame: CGRectZero]; [statusBar showWithStatusMessage:@"正在提交信息"]; // TODO 登录成功之后记录密码 if (rememberUsernamePassword) { NSMutableDictionary *usernamepasswordKVPairs = [NSMutableDictionary dictionary]; [usernamepasswordKVPairs setObject:txtfldUsername.text forKey:KEY_USERNAME]; [usernamepasswordKVPairs setObject:txtfldPassword.text forKey:KEY_PASSWORD]; [CHKeychain save:KEY_USERNAME_PASSWORD data:usernamepasswordKVPairs]; }else { [CHKeychain delete:KEY_USERNAME_PASSWORD]; } }
给个实现注册功能的的基于JavaFX 界面布局的界面设计DEMO
06-06
好的，以下是一个基于JavaFX的注册界面设计DEMO： ```java import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值