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 ...
随机推荐
- 01_JDK的下载-安装-配置
下载 https://www.oracle.com/technetwork/java/javase/downloads/index.html 安装 1.安装路径不要有空格(去除安装路径中的Progra ...
- 阿里云系统安装部署Freeswitch
1.安装vim apt-get install vim 2.修改镜像源 将/etc/apt/source.list的原有源注释掉,添加下面的源: deb http://mirrors.163.com/ ...
- 地址SQL文件
文件下载 Beckoning
- baidumap 百度地图，实现多点之间的带方向路线图。
通过lastVisitAt判断时间先后. 通过三角函数验证角度 再由baidumap 会制线段 绘制三角箭头 比较难看…… 测试个人 因为框架引用baidu 有各种问题失败,为最快实现,以此页作一个独 ...
- LVS + keepalived的实现
! Configuration File for keepalived global_defs { notification_email { linuxedu@foxmail.com mageedu@ ...
- webgrind安装使用详细说明
webgrind是一个网页版的性能分析工具,它的主要作用就是分析xdebug生成的cachegrind文件,以一种界面友好详尽的方式来展示性能数据.试用了一下感觉还是很不错的,鉴于网上并没有一个系统介 ...
- git clone 新项目时，报error: RPC failed; curl 18 transfer closed with outstanding read data remaining
error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: The remote en ...
- Android蓝牙----打开,关闭操作
① 我们先在AndroidManifest里面增加我们的Bluetooth权限 <uses-permission android:name="android.permission.BL ...
- Python---11模块
在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很 ...
- loadrunner通过web的post请求方法测接口
loadrunner通过web的post请求方法测接口 loginapi() 模拟APP发送请求给Cloud, Action() "Name=input","Value= ...