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 ...
随机推荐
- spring mvc 设置@Scope("prototype")
spring中bean的scope属性,有如下5种类型: singleton 表示在spring容器中的单例,通过spring容器获得该bean时总是返回唯一的实例 prototype表示每次获得be ...
- youths |government|some
N-COUNT (新闻用语,尤指惹麻烦的)青年,小伙子Journalists often refer to young men as youths, especially when they are ...
- 17）将index.php中的代码放到Framework中封装起来
目录结构: 发生改动的类代码: 新增类:Framework.class.php <?php /** * Created by PhpStorm. * User: Interact * Date: ...
- http，tcp，udp的报文格式
http请求报文与响应报文:https://blog.csdn.net/qq_26565861/article/details/80969960 tcp与udp报文:https://www.cnblo ...
- 18.09.22模拟赛T2 历史
网上基本上找不到这道题,何况LJJ还稍微改了一下...... 原题:传送门 题目描述 ljj 被S 国数不清的漂亮小姐姐所吸引,为了搞清楚为什么S 国有如此多的漂亮小姐姐,他决定研究S 国的历史. 根 ...
- 吴裕雄--天生自然 R语言开发学习：回归
#------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...
- 使用JDBC CallableStatements执行存储过程
Using JDBC CallableStatements to Execute Stored Procedures Connector / J完全实现了 java.sql.CallableState ...
- 支持向量机 SVM - Wenjing
概念 将向量映射到一个更高维的空间里,在这个空间里建立有一个最大间隔超平面.在分开数据的超平面的两边建有两个互相平行的超平面,分隔超平面使两个平行超平面的距离最大化.假定平行超平面间的距离或差距越大, ...
- SpringMVC之转发重定向
package com.tz.controller; import org.springframework.stereotype.Controller; import org.springframew ...
- python爬虫练手项目快递单号查询
import requests def main(): try: num = input('请输入快递单号:') url = 'http://www.kuaidi100.com/autonumber/ ...