初次学习前端，接触到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. 基于'sessionStorage'与'userData'的类session存储
			
    Storage.js: 注意:此版本实现的存储在符合Web存储标准(ie8及ie8以上的版本与其他主流浏览器)的情况下与session的周期一致,但在页面不关闭的情况下没有过期时间,ie7及以下版本则 ...
    
			
    2. 
						
  2. linux下查找文件和文件内容
			
    find /xxx -name "*" | xargs grep "某内容" /xxx表示路径,"*"表示在含有某关键字名字下的文件中查找, ...
    
			
    3. 
						
  3. Oracle遇到的一些问题
			
    1.制造数据时出现错误 ORA-30009问题 计划任务: insert into test select rownum,sysdate from dual connect 会出现ORA-30009  ...
    
			
    4. 
						
  4. jquery 获取多个dom对象的方法
			
    $("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val()  ...
    
			
    5. 
						
  5. 小试牛刀——爬topit.me的图片，附github简易上传教程
			
    接触了scrapy ,发现爬虫效率高了许多,借鉴大神们的文章,做了一个爬虫练练手: 我的环境是:Ubuntu14.04 + python 2.7 + scrapy 0.24 目标 topit.me 一 ...
    
			
    6. 
						
  6. Scala学习文档-样本类与模式匹配(match,case,Option)
			
    样本类:添加了case的类便是样本类.这种修饰符可以让Scala编译器自动为这个类添加一些语法上的便捷设定. //样本类case class //层级包括一个抽象基类Expr和四个子类,每个代表一种表 ...
    
			
    7. 
						
  7. URL传值中文乱码
			
    url含有中文 先encodeURI(url)编码 获取之后再解码decodeURI //加密 var param = "itname=" + slRows.ITNAME + &q ...
    
			
    8. 
						
  8. [Codeforces Round #237 (Div. 2)]    A. Valera and X
			
    A. Valera and X time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
    
			
    9. 
						
  9. hex格式介绍及转bin格式的源程序
			
    Intel HEX文件是记录文本行的ASCII文本文件,在Intel HEX文件中,每一行是一个HEX记录,由十六进制数组成的机器码或者数据常量.Intel HEX文件经常被用于将程序或数据传输存储到 ...
    
			
    10. 
						
  10. 利用PartialView返回HTML模型视图
			
    
			
    11.