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 ...
随机推荐
- 谷歌眼镜、亚马逊音箱，5G时代隐私或将面临更大颠覆
别看现在的智能手机.平板电脑.可穿戴设备.智能家居等那么火爆,但离开网络它们其实什么也不是.当然,智能终端设备的迭进也是与网络制式不断向前演变相辅相成的,二者算是互相成就.不过也由此衍生出很多问题,尤 ...
- 类加载器ClassLoader的理解
最近在做一个热加载Class的小组件,这个组件需要对类加载器ClassLoader有所了解,我就顺便借这个机会把学到的一点皮毛与大家分享一下. 从Class文件开始 ClassLoader,顾名思义就 ...
- Coupled model
常见的coupled models phase English paper WRF-Chem mechanism public data 一些重要的结论 干空气的状态方程 ECWMF驱动WRF 常见的 ...
- SpringBoot多数据源中的分布式事务
虽然现在微服务越来越流行,我们的系统随之也拆分出来好多的模块功能.这样做的目的其实就是为了弥补单体架构中存在的不足.随着微服务的拆分,肯定设计到分库分表,但这之中肯定设计到分布式事务.最典型的例子就是 ...
- JS Style Guide_1
当你在回调函数里要使用函数表达式时,尽量使用箭头函数,比如数组中的 Map.filter.reduce等的回调函数中 [1,2,3].map((x) => { let y = x + 1; re ...
- less 的使用方法总结
一. 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm install -g less 1.2 使用 less 有多种的使用方法,在这里我向大家介绍最常用的俩种方法. 第一种是直接 ...
- JSP Connect Database
JDBC简介 在Java技术中,访问数据库的技术叫做JDBC,它提供了一系列的API,让Java语言编写的代码连接数据库,对数据库进行添加.删除.修改和查询. JDBC相关的API存在java.sql ...
- zookeeper 单机部署
第一步:下载安装包 这里以3.4.11为例 https://archive.apache.org/dist/zookeeper/ 点进去看: 下载tar文件 第二步:上传到服务器 使用ftp工具上传 ...
- wxpython(2)--按钮，位图按钮，滑动块，微调控制器
本文介绍按钮,位图按钮,滑动块,微调控制器**.. 按钮 基本按钮 创建一个按钮,绑定点击事件,点击后修改Label 123456789101112131415161718 import wx cla ...
- 编写高质量 Objective-C 代码
第一章 熟悉 Objective-C 第一条:了解 Objective-C 起源 Objective-C 是 C 语言动态性扩充.使用"消息结构"而非"函数调用" ...