初次学习前端，接触到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. OpenGL ES 2.0 混合
			
    混合技术 混合技术就是将俩个片元调和,主要用于将通过各项测试准备进入帧缓冲的片元(源片元)与原有片元按照设定的比例加权计算出最终片元的颜色值. OpenGL ES 2.0中是通过设置混合因子来指定两个 ...
    
			
    2. 
						
  2. Angularjs 日期格式转换
			
    我自己的随笔,记录我编码的点滴. <!DOCTYPE HTML><html><head>    <meta charset="utf-8" ...
    
			
    3. 
						
  3. Spring AOP之异常转换
			
    Spring-AOP之异常转换 引子 最近项目遇到了一个问题,就是说业务层向展现层需要转换成统一个异常类,并抛出异常,但是由于业务层的异常类过多,所以导致业务异常转换代码充斥着异常转换的代码,本着程序 ...
    
			
    4. 
						
  4. phantomjs初入门
			
    对DOM操作,而调试过程必不可少,对于那些微乎其微的方法,总显得余力不足.在这里PhantomJS就就行了很好的实现. PhantomJS是一个拥有JavaScript API的无界面WebKit 正 ...
    
			
    5. 
						
  5. http_load压力测试
			
    http_load是基于linux平台的性能测试工具,它体积非常小,仅100KB.它以并行复用的方式运行,可以测试web服务器的吞吐量与负载. 一.安装http_load A.进入/usr/local ...
    
			
    6. 
						
  6. ViewDragHelper的使用
			
    一.ViewDragHelper的原理 是一个能够自用移动ViewGroup内部View的控件. 通过获取ViewGroup的点击事件,之后通过Scroller滑动来进行对ViewGroup内部控件的 ...
    
			
    7. 
						
  7. Trucking（HDU 2962 最短路+二分搜索）
			
    Trucking Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total  ...
    
			
    8. 
						
  8. Java语言中有4种访问修饰符
			
    转载:http://wuhaidong.iteye.com/blog/851754 Java语言中有4种访问修饰符 在Java语言中有4中访问修饰符:package(默认).private.publi ...
    
			
    9. 
						
  9. Microsoft Certification List
			
    Exam Title Files 70-178 Microsoft Project 2010, Managing Projects 16 70-243 Administering and Deploy ...
    
			
    10. 
						
  10. 单线多拨，傻瓜式openwrt单线多拨叠加速率教程
			
    http://bbs.pceva.com.cn/thread-98362-1-1.html
    
			
    11.