初次学习前端，接触到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. dwz笔记之tree权限扩展
			
    碰到的问题:tree选择子节点时,父级节点的值没有选择 解决方法如下(红色部分): 原代码: _checkParent:function(){ if($(this).parent().hasClass ...
    
			
    2. 
						
  2. 【android】android调用模拟器超时问题
			
    问题如下: 解决方案: 1)重启连接桥 C:\Users\hacket>adb kill-server C:\Users\hacket>adb start-server或者 adb log ...
    
			
    3. 
						
  3. Tree 使用方式
			
    Traditional Ways of Tree Traversal This page contains examples of some “standard” traversal algorith ...
    
			
    4. 
						
  4. 关于页面刷新或者调用方法事获取不到元素信息或者出现缺少对象错误的换位思考setTimeout的使用
			
    这两天客户的需求不能定下来,做闲人好长时间了,不如来整理下最近碰到的一些个小麻烦. 正题: 场景一. 最近在开发的过程中使用到了百度的富客户端文本编辑器(ueditor)---这是一款功能很强大的文本 ...
    
			
    5. 
						
  5. css 溢出文本显示省略号
			
    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
    
			
    6. 
						
  6. Python读入与写出中文时出现乱码
			
    解决办法:重置sys模块,设置默认编码方式为utf-8. 在.py文件的开头添加下面两行代码: reload(sys) sys.setdefaultencoding('utf8')
    
			
    7. 
						
  7. python Cmd实例之网络爬虫应用
			
    python Cmd实例之网络爬虫应用 标签(空格分隔): python Cmd 爬虫 废话少说,直接上代码 # encoding=utf-8 import os import multiproces ...
    
			
    8. 
						
  8. [bzoj1002][FJOI2007 轮状病毒] (生成树计数+递推+高精度)
			
    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图 ...
    
			
    9. 
						
  9. scaletype
			
    http://www.myexception.cn/image/726203.html 图片说明Andorid中ImageView的不同属性ScaleType的区别 ImageView是Android ...
    
			
    10. 
						
  10. LeetCode_Regular Expression Matching
			
    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...
    
			
    11.