web实验二 ---通过jQuery实现用户注册身份验证
通过jQuery实现用户注册身份验证，当每个文本框失去焦点时进行该文本框内容校验，并将校验信息在文本框右侧显示出结果。
具体校验要求：
1、用户名由6-18位字符组成
2、密码由6-18位字符组成，且必须包含字母、数字和标点符号
3、确认密码必须和密码相同，否则提示密码不一致
4、电子邮件必须符合电子邮件格式
5、自我介绍不能为空
6、用户点击重置时清空所有文本框内容
7、用户点击提交是将用户信息存入对象user中，同时检查性别、出生日期是否选择，如果没有就弹出提示对话框，爱好至少选择一个，否支弹出提示。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>用户登录示例</title>
<script src="jquery-3.4.1.js " type="text/javascript"> </script>
</head>
<body>
<form id="userFrom" name="user" action="#" method="post">
<table align="center" border="0" cellpadding="2" width="1000" >
<tr>
<td> 用户名</td> <td>
<input name="username" type="text" id="txtUser">
</td>
<td id="info_username">*用户名由6-18位字符组成
</td>
</tr> <tr>
<td>密 码</td>
<td>
<input id="txtPwd" name="password" type="password">
</td>
<td id="info_pwd">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input name="pwdrepeat" type="password" id="txtRpt">
</td>
<td id="info_rpd">* 请再次输入密码</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<select name="userType" id="selUser">
<option name="admin" value="admin">管理员</option>
<option name="sysadmin" value="sysadmin">系统管理员</option>
</select>
</td>
<td>* 请选择用户类型</td>
</tr>
<tr>
<td>性 别</td>
<td>
<input class="sex" type="radio" id="man" name="sex" value="male">男
<input class="sex" type="radio" id="woman" name="sex" value="2">女
</td>
<td>*请选择你的性别</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input class="Date" name="birthday" type="date" id="txtDate"/>
</td>
<td>*请选择你的出生日期</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<input class="hobby" type="checkbox" id="read" name="hobby" value="1">阅读
<input class="hobby" type="checkbox" id="music" name="hobby" value="2">音乐
<input class="hobby" type="checkbox" id="sport" name="hobby" value="3">运动
</td>
<td>*请选择兴趣爱好</td>
</tr>
<tr> <td>电子邮箱</td> <td>
<input name="email" type="email" id="txtMail"/>
</td><td id="info_mail">* 用email找回密码</td>
</tr> <tr>
<td>自我介绍</td>
<td>
<textarea name="introduction" id="txtIntro" cols="40" rows="5"></textarea>
</td><td>*</td>
</tr> <tr>
<td colspan ="2" align="center">
<input type="submit" name="submit" id="register" value="提交"/>
<input id="reset"type="reset" value="重填"/>
</td>
</tr>
</table>
</form>
</body>
<script> $(document).ready(function() { /*用户名验证*/
$("#txtUser").blur(function(){
var username=$(this).val();
if(checkUserName(username)){
$("#info_username").text("用户名正确");
}else{
$("#info_username").text("用户名不符合要求，长度在8-16个字符");
}
}); /*用户名验证功能定义*/ function checkUserName(name){
var re=/^[a-zA-Z0-9]{6,18}$/;
if(re.test(name)){
return true;
}
else{
return false;
}
} /*密码验证*/
$("#txtPwd").blur(function(){
var password=$(this).val();
if(checkPwd(password)){
$("#info_pwd").text("密码符合要求")
}else{
$("#info_pwd").text("密码太简单") }
});
/*密码限制功能*/ function checkPwd(pwd){
var re=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,16}$/ ;
if (re.test(pwd)){
return true;
}else{
return false; }
} /*再次确认密码*/
$(function(){
$("#txtRpt").blur(function(){
if($("#txtPwd").val()!=$("#txtRpt").val()){
$("#info_rpd").text("确认密码和密码不一致");
}else{
$("#info_rpd").text("确认密码和密码一致");
} }) }); /*邮箱验证*/
$("#txtMail").blur(function(){
var mail=$(this).val();
if (checkMail(mail)){
$("#info_mail").text("邮箱地址格式正确");
}else{
$("#info_mail").text("邮箱地址格式不正确"); }
}); /*邮箱功能*/
function checkMail(mail){
var re=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if(re.test(mail)){
return true;
} else{
return false; }
} /*提交功能*/ $("#register").click(function(){
var user={};
var username=$("#txtUser").val();
if(checkUserName(username)){
user.username=username;
}else{
alert("用户名格式不正确");
return;
}
var password=$("#txtPwd").val();
if(checkPwd(password)){
user.password=password;
}else{
alert("请重新输入密码");
return; }
var rp=$("#txtRpt").val();
if(password!=rp){
alert("确认密码和密码不一致");
return;
}
var type=$("#selUser").val();
user.type=type;
var sex=$(".sex:checked").val();
if(sex!=null){user.sex=sex;
}else{
alert("请选择性别");
return ;
} var birthday=$("#txtDate").val(); if (birthday==null) {
alert("请选择出生日期");
return ;
}else{
user.birthday=birthday;
} var hobby=new Array();
$(".hobby:checked").each(function(){
hobby.push($(this).val()) });
if(hobby.length=0){
alert("请选择爱好");
return;
}else{
user.hobby=hobby;
}
var mail=$("#txtMail").val();
if (checkMail(mail)){
user.mail=mail;
}
else{
alert("请选择日期");
return;
} var introduction=$("#txtIntro").val();
if(introduction==null){
user.introduction=introduction;
}else{
alert("自我介绍不能空");
} alert(user);
}); }); </script>
</html>
web实验二 ---通过jQuery实现用户注册身份验证的更多相关文章
- 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证]
二.使用Azure AD进行身份验证 之所以将Azure AD 作为开始,是应为基本上我们所有应用都需要进行安全管理.Azure Active Directory (Azure AD) 通过以下方式简 ...
- 《Python编程：从入门到实践》第19章笔记：用户/用户注册/身份验证
接上篇django最基本的一些日常用法,这是第19章笔记,希望在做"动手试一试"的时候可以让自己方便参考. 这一章实现了两个功能: 1.让用户能够添加主题Topic和条目Entry ...
- 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证-2.2身份验证开发]
2.2身份验证开发 在我们的案例中,我们是用户通过Web应用程序进行身份识别. 上面的图示说明了如下的一些概念 l Azure AD 是标识提供程序,负责对组织的目录中存在的用户和应用程序的标识进行验 ...
- ASP.NET Web API Basic Identity 中的基本身份验证
缺点 用户凭证在请求中发送. 凭据作为明文发送. 每个请求都会发送凭据. 无法注销,除非结束浏览器会话. 易于跨站点请求伪造(CSRF); 需要反CSRF措施. 优点 互联网标准. 受所有主要浏览器支 ...
- 【二】shiro入门 之 身份验证
大体步骤如下: 1.首先通过new IniSecurityManagerFactory 并指定一个ini 配置文件来创建一个SecurityManager工厂: 2.接着获取SecurityManag ...
- 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证--2.1使用Azure AD需要了解几个概念]
2.1使用Azure AD需要了解几个概念 l Azure AD目录 当你注册 Microsoft 云服务时,便会获得一个 Azure AD 目录.你可根据需要创建更多的目录.例如,可以将第一个目录保 ...
- ASP.NET Web API身份验证和授权
英语原文地址:http://www.asp.net/web-api/overview/security/authentication-and-authorization-in-aspnet-web-a ...
- 关于ASP.NET的“Forms身份验证”
目录结构如图如示: 如果用户没有通过身份验证则跳转到登录页面让用户登录,在配置文件的<system.web></system.web>结点下添加如下代码: <!--身份验 ...
- ASP.NET中WebService的两种身份验证方法
一.通过SOAP Header身份验证 此方法是通过设置SOAP Header信息来验证身份,主要通过以下几步: 1.在服务端实现一个SOAP Header类 public class Credent ...
随机推荐
- dbSNP|n SwissVar|n CanProVar|CHPP|mutation assessor|
癌症蛋白质基因组学主要研究driver性质的突变,该突变有可能是转化为癌基因的突变.抑癌基因突变.药物位点突变和蛋白突变,可以使用mutation assessor 预测突变 突变导致疾病,修饰仅影响 ...
- Spring-IOC（DI）的三种注入方式
spring为方便不同的需求,为我们提供了3中不同的注入方式分别是set.get方法注入,构造注入还有p命名空间注入,老规矩,直接上代码 首先创建实体类Student public class Stu ...
- Markdown 语法手册
1. 斜体和粗体 使用 和 * 表示斜体和粗体. 示例: 这是 斜体,这是 粗体. 2. 分级标题 使用 === 表示一级标题,使用 - 表示二级标题. 示例: 1234567 这是一个一级标题=== ...
- FPGA大疆考试准备内容
1.寄存器与锁存器 锁存器:电平触发的存储单元,在有效电平时间里可以多次改变数据. 优点: 占触发器资源少,缺点是容易产生毛刺.(附上去毛刺的方法:格雷码计数器(*https://blog.cs ...
- [LC] 142. Linked List Cycle II
Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...
- JDK源码看Java域名解析
前言 在互联网中通信需要借助 IP 地址来定位到主机,而 IP 地址由很多数字组成,对于人类来说记住某些组合数字很困难,于是,为了方便大家记住某地址而引入主机名和域名. 早期的网络中的机器数量很少,能 ...
- CF-1117C-Magic Ship
二分 C - Magic Ship GNU C++11 Accepted 31 ms 1700 KB #include "bits/stdc++.h" using namespac ...
- iOS(Swift)学习笔记之SnapKit+自定义UI组件
本文为原创文章,转载请标明出处 1. 通过CocoaPods安装SnapKit platform :ios, '10.0' target '<Your Target Name>' do u ...
- SQL Server 2008R2各个版本，如何查看是否激活，剩余可用日期？
SELECT create_date AS 'SQL Server Installed Date', Expiry_date AS 'SQL Server Expiry Date', DATEDIFF ...
- k8s集群搭建（三）
Dashboard安装 Kubernetes Dashboard是k8s提供基于Web的监控和操作界面,可以通过UI来显示集群的所有工作负载,除了查看资源,还是创建.编辑.更新.删除资源. 根据Kub ...