初次学习前端，接触到jquery，写了一个简单的注册账号，

并判断输入内容是否符合命名规则的页面效果如下：

首先创建html，js文件

在做页面布局之前还要连接js文件，然后开始布局自己的页面效果

if<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机注册</title>

    <script src="js/jquery.js"></script>
    <script src="js/jquerytest.js"></script>
</head>
<body>

<form name='myform' method='post' action="" onsubmit="check()">
    手机: <input name='phone' type="phone" id="phone">
　　　　　　<span id=phone_error></span><br />
    密码: <input name='password' id="password" placeholder="密码长度必须大于等于6位" type="password">
   　　　　<span id="pw_error"></span><br />
    <input type="button" value="注册" id="register"/>

</form>

</body>
</html>
在完成了布局之后，要为注册的button添加事件，在这里要做出判断，
使用if条件语句判断是否符合规则，效果如下：

$(document).ready(function() {
    $("#register").click(function() {
        var tel=$("#phone").val();
        var pw=$("#password").val();
        $("#phone_error").css({"color":"black"});
        $("#pw_error").css({"color":"black"});

        if(tel==""){
            $("#phone_error").html("<b>手机不能为空</b>");
        }else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(tel))){
            $("#phone_error").html("<b>手机号码不符合规则</b>");
        }else{
            $("#phone_error").text("");
        }
        if(pw==""){
            $("#pw_error").html("<b>密码不能为空</b>");
        }
        else if(pw.length<6){
            $("#pw_error").html("<b>密码不符合规则</b>");
        }else{
            $("#pw_error").text("");
        }
        if((/^1[3|4|5|8][0-9]\d{4,8}$/.test(tel))&&pw.length>=6 ){
            alert("恭喜您成功注册");
        }

    });
});
最后注册成功

写的不好，望读者见谅，只想用此一步步记录自己的成长



												


											
初学者的jquery登录注册和弹窗设计的更多相关文章
	

    
								
  1. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
		
    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...
    
		
    2. 
						
  2. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册
		
    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...
    
		
    3. 
						
  3. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果
		
    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...
    
		
    4. 
						
  4. jQuery.vilidation.js登录&注册
		
    代码解析:通过ajax获取url路径链接php接口做登录和注册获取到的数据传到数据库. ajax利用四步: //1.创建一个ajax对象; //2.打开请求: //判断用户传递的是get还是post请 ...
    
		
    5. 
						
  5. 一个关于vue+mysql+express的全栈项目（三）------ 登录注册功能的实现（已经密码安全的设计）
		
    本系列文章,主要是一个前端的视角来实现一些后端的功能,所以不会讲太多的前端东西,主要是分享做这个项目学到的一些东西,,,,, 好了闲话不多说,我们开始搭建后端服务,这里我们采用node的express ...
    
		
    6. 
						
  6. 课程设计之C/C++实现用户登录注册
		
    最近的一个课程设计要求的一个用户登录的程序,通常软件网页等的用户登录注册都是涉及到数据库.但像课程设计这种小程序要求的安全度不高就可以用c/c++实现. 首先,我们要清楚用户登录的流程.应该大家对这些 ...
    
		
    7. 
						
  7. 使用Boostrap框架写一个登录\注册界面
		
    Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器.类选择器.ID选择器为指 ...
    
		
    8. 
						
  8. web全栈开发之网站开发二（弹出式登录注册框前端实现-类腾讯）
		
    这次给大家分享的是目前很多网站中流行的弹出式登录框,如下面的腾讯网登录界面,采用弹出式登录的好处是大大提升了网站的用户体验和交互性,用户不用重新跳转到指定的页面就能登录,非常方便 先来个演示地址 要实 ...
    
		
    9. 
						
  9. android安卓Sqlite数据库实现用户登录注册
		
    看了很多别人写的安卓SQlite数据的操作代码,一点也不通俗易懂,我觉得我写的不错,而且安卓项目也用上了,所以在博客园里保存分享一下!建立一个类 并继承SQLiteOpenHelper public  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SQL Server类型与C#类型对应关系
			
    SQL类型 C#类型 bit bool tinyint byte smallint short int int bigint long real float float double money de ...
    
			
    2. 
						
  2. lightOJ1370 欧拉函数性质
			
    D - (例题)欧拉函数性质 Crawling in process... Crawling failed Time Limit:2000MS     Memory Limit:32768KB     ...
    
			
    3. 
						
  3. sqlite的事务
			
    好久没用数据库,知识都忘了,之前用sqlite 逐行insert数据,发现这性能实在是太坑,10w条数据,插入大约花了100来分钟. 后来发现还有事务这么一个东西,可以大幅度降低对io的操作,测试插入 ...
    
			
    4. 
						
  4. clearInterval()与setInterval()的应用
			
    1.setInterval()按照一定的周期调用函数2.clearInterval()取消setInterval()的周期调用 例如:图片轮播中的clearInterval()与setInterval ...
    
			
    5. 
						
  5. apache 出现Index of /的页面解决
			
    在apache安装文件中找到http.conf配置文件,打开找到 Options Indexes FollowSymLinks 这行,在Indexes前加一个-(减号),也就是该完之后是这样: Opt ...
    
			
    6. 
						
  6. Java学习笔记--Swing
			
    1.创建框架 AWT中Frame类用来描述顶层窗口,在Swing中,这个类的名为JFrame,它从Frame类扩展. JFrame是少数几个在Swing不用绘制在画布上的组件之一,因此,它的修饰部件( ...
    
			
    7. 
						
  7. angular中设置$http的post请求的数据传递格式
			
    ArgularJS的$http方法支持全局设置: $http.defaults.headers.post["Content-Type"] = "application/x ...
    
			
    8. 
						
  8. (转)centos6起/etc/syslog.conf不再有！而是/etc/rsyslog.conf代替！
			
    centos6起/etc/syslog.conf不再有!而是/etc/rsyslog.conf代替!
    
			
    9. 
						
  9. AOI
			
    AOI(Automatic Optic Inspection)的全称是自动光学检测,是基于光学原理来对焊接生产中遇到的常见缺陷进行检测的设备.AOI是新兴起的一种新型测试技术,但发展迅速,很多厂家都推 ...
    
			
    10. 
						
  10. UITableView系列(1)---Apple缓存池机制
			
    一.概述 关于UITableView的基本使用, 其实十分简单.但是做App最重要的之一就是细致,技术方面要做到细致, 必须深入了解底层, 才能做出优化让程序跑得更快.那么这一系列文章从我实际项目中获 ...
    
			
    11.