Jquery一个简单的注册验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.8.3.js"></script>
<script>
$(document).ready(function() {
//用户名离开焦点的判断
$("#textfirst").blur(function(){
var first=$(this).val(); //得到用戶名文本框的值
var rr=$(this).closest("tr").find("td:last");//得到這個文本框上的tr下面的最后一個td
if(first==""){//判斷如果 first 文本框的值等于空的話
rr.text("*用户名不能为空");//就在rr最後一個td裏面設置提示信息
}else if(first.length<6 || first.length>12){//如果长度小于6 或者是小于 12 就是不合法
rr.text("用户名长度不合法");
}
else{ //否则就给出正确的提示 进行下一步验证密码
rr.text("√");
var pass;
var $tt;
$("#textpassword").blur(function(){//同上如果密码框失去焦点
pass=$(this).val(); //得到密码框的值
$tt=$(this).closest("tr").find("td:last"); //得到最后一个td
if(pass==""){ //开始验证 判断是否为空
}else if(pass.length<6 || pass.length>12){ //判断密码框的长度
$tt.text("*密码长度不合法");
}else{//条件都符合 就给出正确的提示信息 再进行下一步
$tt.text("√");
//确认密码的一个验证
var Confirm;
var password;
$("#textquerenpassword").blur(function(){ //同上 设置确认密码框失去焦点
Confirm=$(this).val();//得到第二次输入密码的值
password=$(this).closest("tr").find("td:last"); //得到最后一个id
if(Confirm==""){//开始验证 判断为空性
password.text("*请再输入一次密码");
}else if(Confirm!=pass){//为空性通过后 判断输入的值是否和上一次的密码相同
password.text("*与上一次输入的密码不符合!");
}else{ //通过以上判断后 给出正确的提示信息 然后再进行下一步性别的判断
password.text("√");
//性別
var radio=$("input:radio:checked").val();//首先得到性别单选框的值
if(radio==null){//然后判断为空性
$("input:radio").closest("tr").find("td:last").text("*请选择性别");
return false;
}else{
$("input:radio").closest("tr").find("td:last").text("√");//为空性 通过后 就给出正确的提示信息 继续下一步验证 年龄
//年龄
$("select").change(function(){//年龄的下拉框设置chang事件
var option=$(this).val();//得到它的值
if(option<6 || option>66){//判断小于6 或者大于66 就为不合法
$(this).closest("tr").find("td:last").text("*年龄不合法");
}else{
$(this).closest("tr").find("td:last").text("√");//否则就给出 提示信息 继续下一步验证 地址
//地址
$("#textaddress").blur(function(){//地址文本框 设置焦点离开
var add=$(this).val();//得到值
var address=$(this).closest("tr").find("td:last");//得到最后一个td
if(add==""){//开始 验证 判断为空性
address.text("*地址不能为空!");
}else if(add.length<20){//为空性通过后 进行长度的判断
address.text("*地址长度不能小于20");
}else{//以上条件都通过后 就给出正确提示信息 然后进行最后一步验证 邮箱
address.text("√");
//邮箱
$("#textemail").blur(function(){//首先 还是一样给邮箱设置离开事件
var email=$(this).val();//得到输入邮箱的值
var eam=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;//有正则表达式 规则
var ea=$(this).closest("tr").find("td:last");//得到最后一个td
if(email==null){//开始验证 还是先判断为空性
ea.text("*邮箱不能为空!");
}else if(!eam.exec(email)){//其次 用正则表达式和输入邮箱的值进行匹配
ea.text("*邮箱格式不对!");
}else{//最后给出提示信息//点击提交
ea.text("√");
$("input[type=button]").click(function(){//提交事件
alert("恭喜你!注册成功!");
});
}
});
}
});
}
});
return true;
}
}
});}
});}
});
});
</script>
<style>
table{
width:800px;
height:300px;
margin:0 auto;
border:1px solid rgba(100,100,100,0.5);
margin-top:50px;
}
table td:first-child{
text-align:right;
}
table td{
text-align:left;
border:0px solid;
height:30px;
width:80px;
}
table td:last-child{
text-align:right;
display:block;
border:0px solid;
width:100px;
height:30px;
}
i{
float:left;
}
table td:last-child{
text-align:left;
border0px solid rgba(100,100,100,0.1);
font-size:13px;
color:red;
font-family:"楷体";
}
</style>
</head>
<strong>
<!--注册页面
1.用户名
2.密码
3.确认密码
4.性别 单选框
5.年龄
6.地址
7.电子邮件
6个选项首先判断不能允许为空
1.用户名长度6-12之间
2.密码长度6-12之间
3.确认密码长度6-12之间
4.密码与确认密码必须一致
5.年龄:必须在16-60之间
6.地址:长度20以上
7.验证邮件是否为合法邮箱
当验证的时候,在该元素的后面显示错误信息,用红色表示</strong>-->
<body>
<table cellspacing="10">
<tr>
<th colspan="2" style="text-align:center">注册页面</th>
</tr>
<tr>
<td>用户名:</td><td><input type="text" id="textfirst" value=""/></td>
<td></td>
</tr>
<tr>
<td>密码:</td><td><input type="password" id="textpassword" value=""/></td><td></td>
</tr>
<tr>
<td>确认密码:</td><td><input type="password" id="textquerenpassword"/></td><td></td>
</tr>
<tr>
<td>性别:</td><td>男<input type="radio" name="radiosex" value="男"/>女<input type="radio" name="radiosex" value="女"/></td><td></td>
</tr>
<tr>
<td>年龄:</td><td><select style="width:150px;height:30px;text-align:center;font-size:20px">
<script>
for(var i=0;i<100;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select></td><td></td>
</tr>
<tr>
<td>地址:</td><td><input type="text" id="textaddress" style="height:50px"/></td><td></td>
</tr>
<tr>
<td>电子邮件:</td><td><input type="text" id="textemail"/></td><td></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="提交"/></td>
</tr>
</table>
</body>
</html>
//如有不足 敬请谅解
Jquery一个简单的注册验证相关推荐
- 从零开始，搭建一个简单的UVM验证平台（一）
前言: 这篇系列将从0开始搭建一个UVM验证平台,来帮助一些学习了SV和UVM知识,但对搭建完整的验证环境没有概念的朋友. UVM前置基础: 1.UVM基础-factory机制.phase机制 2.U ...
- html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面 自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
- Jquery一个简单的点赞效果，实现点赞数+1
Jquery一个简单的点赞效果,实现点赞数+1 1.导入JS <script src="js/jquery-3.3.1.js" type="text/javascr ...
- 【IOS】利用ASIHTTPRequest 实现一个简单的登陆验证
[原创作品, 欢迎转载,转载请在明显处注明! 谢谢. 原文地址:http://blog.csdn.net/toss156/article/details/7638529] 今天给大家带来一个简单的登陆 ...
- 一个简单的注册页面制作
一个简单的网页–流水哗啦啦购物平台: 点击注册新用户后,出现的注册页面: 当密码少于八位时出现的提示: 当密码格式不正确时出现的提示: 当年龄格式不正确时出现的提示:(年龄有效格式为1-120之间的数 ...
- 诙谐有趣的《UVM实战》笔记——第二章 一个简单的UVM验证平台
前言 某天白天在地铁上听鬼故事,结果晚上要睡觉时,故事里的情节都历历在目,给我鸡皮疙瘩起的~ 不过我倒是没有吓得睡不着,而是转念一想,为啥我学知识忘得很快,随便听的鬼故事却记得这么清楚咧? 那如果能像 ...
- 用Python基础创建一个简单的注册登录系统
在学完Python基础后,是不是有一点想法去做一点好玩的程序呢?如果想可以看看这个注册登录系统,会带给你一些思路. 大家都对登录注册系统司空见惯了吧,我们周围的许多东西都需要登录注册系统,例如很受大众 ...
- 一个简单的UVM验证平台
2.1 验证平台的组成 2.1.1. 何谓验证平台 何谓验证平台?验证最基本的目的在于测试 DUT 的正确性,其最常使用的方法就是给 DUT 施加不同的输入(激励),所以一个验证平台最重要的的功能在于 ...
- 使用php创建一个注册表单,如何实现一个简单的注册表单
创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...
最新文章
- 搞懂机器学习的常用评价指标！
- c++错误之map的find()返回值类型
- 利用rsync如何同步单个文件
- Xcode10升级问题:Multiple commands produce Info.plist
- Java基础算法--排序
- 超级硬盘数据恢复软件 4.6.5.0注冊码破解版
- 亿愿Word文档批量多语言翻译---word文档翻译专家！几十种语言随意快速互译！可以生成中外文，中英文对照内容文档！
- Java核心类库之（类加载器、反射机制、模块化）
- js控制form提交
- ps知识点1-快捷键、文件新建与存储、移动工具、矩形选框、套索工具、快速选择、魔棒
- python学习（二十一）
- hdu1256-画8
- kdj指标主要看哪个值_KDJ指标介绍及看盘看点(图解)
- B2B2C分布式微服务电商源码（支持：小程序、公众号、H5、IOS、Android）
- 《A Template for Understanding Big Debt Crises》 pdf、mobi、epub下载
- 【CE入门教程】使用Cheat Engine(CE)修改游戏“植物大战僵尸”之其他篇
- 开源IM项目OpenIM每周迭代版本发布-群管理 阅后即焚等-v2.0.6
- 有关防爆知识（防爆标识格式解释）
- windows安装部署hadoop 2.7.7
- Redis之Hash超详细API使用及应用场景介绍，不看亏了！