初次学习前端，接触到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. js页面加载进度条(这个就比较正式了，改改时间就完事儿)
			
    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
    
			
    2. 
						
  2. Windows Server 2003 SP2企业版ISO下载, windows2003系统下载,2003系统下载,2003系统
			
    Windows Server 2003 SP2 企业版ISO下载(真正企业免激活版) 此版本适合作为一个新系统来安装,也适合在虚拟机中安装 点评:Windows Server 2003 SP2 企业版 ...
    
			
    3. 
						
  3. iOS学习之详解AppDelegate
			
    AppDelegate, 类似于监听接口. 用个很简单的例子说:ios系统会控制每个程序的开始和结束.但是ios又不知道每个程序的开始需要运行成么代码,结束需要运行什么代码.这个时候,ios就制定了一 ...
    
			
    4. 
						
  4. .net 既可以输入又可以选择的dropdownlist
			
    第一.<script src="../../../Common/Scripts/combox.js" type="text/javascript"> ...
    
			
    5. 
						
  5. a标签# 和javascript:;的区别
			
    最近遇到一个问题,解决了记录下来. <body style="height:10000px;"> <span style="top:3000px;pos ...
    
			
    6. 
						
  6. 163k地方门户网站系统自动审核信息脚本
			
    本代码实现对163k地方门户网站系统发布信息的自动审核,以及对内容中链接全过滤 软件安装 Python 安装 http://www.python.org/download/ pymssql安装 htt ...
    
			
    7. 
						
  7. BZOJ 2298 problem a(区间DP)
			
    题意:一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) 思路:考虑最多有多少人说真,那么答案就是n-max. ai个人分数 ...
    
			
    8. 
						
  8. LeetCode_Insert Interval
			
    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
    
			
    9. 
						
  9. OpenSceneGraph是一个开源的三维引擎
			
    http://www.osgchina.org/OpenSceneGraph是一个开源的三维引擎,被广泛的应用在可视化仿真.游戏.虚拟现实.科学计算.三维重建.地理信息.太空探索.石油矿产等领域.OS ...
    
			
    10. 
						
  10. Eclipse配置JDK的源代码的src.zip
			
    Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...
    
			
    11.