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 ...
随机推荐
- Anaconda 安装、TensorFlow 安装、pytorch 安装
问题 1 假设已经安装完Anaconda Navigator,按照 网址:https://www.zhihu.com/question/55577586 的教程操作,设置镜像源地址,安装. 问题 2: ...
- python的可迭代对象
今日所得 迭代器 可迭代对象 迭代器对象 for循环内部原理 生成器 生成器表达式 内会函数 面对过程编程 迭代器 迭代就是指更新换代的过程,要重复进行,而且每次的迭代都必须基于上一次的结果. 我们使 ...
- [LC] 8. String to Integer (atoi)
Implement atoi which converts a string to an integer. The function first discards as many whitespace ...
- NIO详解
目录 NIO 前言 IO与NIO的区别 Buffer(缓冲区) Channel(通道) Charset(字符集) NIO遍历文件 NIO 前言 NIO即New IO,这个库是在JDK1.4中才引入的. ...
- mysql数据库常用命令入门
查询所有数据库 show databases; 创建数据库 create database mytest001 default character set utf8; 查看数据库的默认字符集 show ...
- python读取配置文件报keyerror-文件路径不正确导致的错误
- 在其他模块使用反射读取配置文件报错,但是在反射模块中读取GetData.check_list又是正确的 反射模块如下: # get_data.py from API_AUTO.p2p_projec ...
- 0-1背包问题-DP
中文理解: 0-1背包问题:有一个贼在偷窃一家商店时,发现有n件物品,第i件物品价值vi元,重wi磅,此处vi与wi都是整数.他希望带走的东西越值钱越好,但他的背包中至多只能装下W磅的东西,W为一整数 ...
- Windows Server 2008 配置 PHP 环境
在配置PHP环境之前要先配置好IIS. 传送门-> Win2008 Server下配置安装IIS 如果IIS是以默认的配置安装,则还需要安装CGI. 在这里勾选CGI,然后安装. 创建一个网站 ...
- [洛谷P3366] [模板] 最小生成树
存个模板,顺便复习一下kruskal和prim. 题目传送门 kruskal 稀疏图上表现更优. 设点数为n,边数为m. 复杂度:O(mlogm). 先对所有边按照边权排序,初始化并查集的信息. 然后 ...
- String.slice
String.slice(start, end)start从字符串的哪个index开始截取 默认值0 如果为负值,则从字符串的尾部向前倒推indexend到从字符串的哪个index结束截取 默认值st ...