注册界面模拟,判断邮箱是否符合格式,密码是都符合格式
来源:互联网 发布:淘宝雷蛇专卖店 编辑:程序博客网 时间:2024/05/16 07:20
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
table {
border: 1px solid #999;
border-collapse: collapse;
}
td {
padding: 10px;
height: 50px;
border: 1px solid #999;
}
tr td:first-child {
text-align: right;
background-color: aqua;
}
input {
background-color: aqua;
border: 1px solid #999;
float: left;
}
div {
display: inline;
float: left;
margin-left: 10px;
}
button {
width: 100px;
margin-left: 250px;
margin-top: 10px;
}
img {
width: 20px;
height: 20px;
margin-right: 5px;
margin-top: 5px;
}
</style>
<script>
$(function () {
$("img").hide();
$("#email").blur(function () {
$("img").hide();
/*验证emial*/
if ($("#email").val().indexOf("@") != -1) {
$("#dui").show();
$("#emid").text("用户可用");
} else {
$("#cuo").show();
$("#emid").text("Email错误");
}
});
/*验证昵称*/
$("#name").blur(function () {
if ($("#name").val().length < 4) {
$("#nameid").text("用户输入信息错误");
} else {
$("#nameid").text("用户输入正确");
}
});
/*验证密码格式*/
var $pass = "";
$("#password").blur(function () {
if ($("#password").val().length < 6) {
$("#pass").text("用户密码不可用");
} else {
$pass = $("#password").val();
$("#pass").text("用户密码可用");
}
});
/*验证两次密码是否一致*/
$("#repass").blur(function () {
if ($("#repass").val() == $pass) {
$("#press").text("用户密码输入正确");
} else {
$("#press").text("用户两次密码不一致");
}
});
/*验证点击*/
$("#add").click(function () {
/*表单符合要求*/
if ($("#email").val().indexOf("@") != -1 && $("#name").val().length >= 4 && $("#password").val().length >= 6 && $("#repass").val() == $pass) {
alert("用户表单符合要求");
} else {
alert("用户表单有误");
}
});
})
</script>
</head>
<body>
<!--页面制作-->
<table>
<tr>
<td>请填写你的Eamil地址:</td>
<td><input type="text" id="email">
<div>请填写有效的Email地址,在下一步您将用此邮箱接收验邮件。<br><img src="cuo.gif" id="cuo">
<img src="dui.gif" id="dui"><span id="emid"></span></div>
</td>
</tr>
<tr>
<td>设置您在当当网的昵称:</td>
<td><input type="text" id="name">
<div>您的昵称可以由小写英文字母、中文、数字组成。<br>长度4-20个字符,一个汉字为两个字符。<br><span id="nameid"></span></div>
</td>
</tr>
<tr>
<td>设置密码:</td>
<td><input type="password" id="password">
<div>您的密码可以由大小写英文字母,数字组成,长度6-20位<br><span id="pass"></span></div>
</td>
</tr>
<tr>
<td>再次输入您设置的密码:</td>
<td><input type="password" id="repass">
<div><span id="press"></span></div>
</td>
</tr>
</table>
<!--注册按钮-->
<button id="add">注册</button>
</body>
</html>
阅读全文
0 0
- 注册界面模拟,判断邮箱是否符合格式,密码是都符合格式
- 判断字符串是否符合邮箱格式
- 判断是否符合 USD 格式
- 判断是否符合指定格式
- Struts2注册信息验证判断是否符合格式 validation
- 判断字符串是否符合时间格式
- iOS判断字符串是否符合格式要求
- 45、判断是否符合USD格式-JavaScript
- 44、判断是否符合指定格式
- 计蒜客-判断日期是否符合格式
- 检测是否符合Email格式
- 验证是否符合手机号格式
- 计蒜客 难题题库 129 判断日期是否符合格式
- android 根据区号判断手机号码是否符合格式
- PHP 判断字符串是否符合指定格式编码-mb_check_encoding
- 判断字符串是否是邮箱的格式
- 判断是否邮箱格式
- 校验经纬度的格式是否符合规范
- Codeforces Round #440 div2 C. Maximum splitting
- 竞赛反思
- cocos2d-js 3.0 RC0 手动绑定 C++调用js,js调用C++ jsbinding
- 表单验证
- 表格渲染(删除查询)
- 注册界面模拟,判断邮箱是否符合格式,密码是都符合格式
- 掷骰子
- 51Nod 1444 破坏道路(最短路+枚举)
- 【LeetCode】Binary Tree Preorder Traversal 二叉树的前序遍历(3种方法)- Easy+
- Mvp实现登陆注册
- RecyclerView+PopupWindow实现下拉列表选择效果
- RecyclerView1
- xlistview
- java学习第29天,getTime();setTime();SimpleDateFormat();