jquery实现员工管理注册页面
本文实例为大家分享了jquery实现员工管理注册页面的具体代码，供大家参考，具体内容如下
代码展示
HTML页面代码
<body>
<div class="container">
<h2 class="text-center">用户注册</h2>
<form action="Baidu.html" method="post" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-md-2 col-md-offset-3 control-label">用户名<b>*</b></label>
<div class="col-md-3">
<input id="username" type="text" placeholder="4-10个英文字母或数字" class="form-control">
</div>
<div class="col-md-4">
<label id="errorname" class="control-label errstyle"></label>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-2 col-md-offset-3 control-label">密码<b>*</b></label>
<div class="col-md-3">
<input id="password" type="password" placeholder="8-16个英文字母或数字" class="form-control">
</div>
<div class="col-md-4">
<label id="errorpassword" class="control-label errstyle"></label>
</div>
</div>
<div class="form-group">
<label for="confirm" class="col-md-2 col-md-offset-3 control-label">确认密码<b>*</b></label>
<div class="col-md-3">
<input id="confirm" type="password" placeholder="确认密码" class="form-control">
</div>
<div class="col-md-4">
<label id="errorconfirm" class="control-label errstyle"></label>
</div>
</div>
<div class="form-group">
<label for="department" class="col-md-2 col-md-offset-3 control-label">部门</label>
<div class="col-md-3">
<select id="department" class="form-control">
<option>销售部</option>
<option>技术部</option>
<option>人事部</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-3 control-label">性别</label>
<div class="col-md-3 radio">
<label><input name="gender" type="radio" value="1" checked>男</label>
<label><input name="gender" type="radio" value="0">女</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-3 control-label">兴趣爱好</label>
<div class="col-md-3 checkbox" id="hobbies">
<label><input type="checkbox" value="1" id="xq">下棋</label>
<label><input type="checkbox" value="2" id="yy">游泳</label>
<label><input type="checkbox" value="3" id="ps">爬山</label>
<label><input type="checkbox" value="4" id="dq">打球</label>
</div>
<div class="col-md-4">
<label id="errorhobbies" class="control-label errstyle"></label>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 col-md-offset-3 control-label">电子邮箱</label>
<div class="col-md-3">
<input type="email" id="email" placeholder="电子邮箱" class="form-control">
</div>
<div class="col-md-4">
<label id="erroremail" class="control-label errstyle"></label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-3 control-label">人生格言</label>
<div class="col-md-3">
<textarea class="form-control" rows="3" placeholder="这家伙很懒，什么也没留下"></textarea>
</div>
</div>
<div class="col-md-2 col-md-offset-5 text-center">
<button class="btn btn-primary" id="submit">提交</button>
<span> </span>
<button class="btn btn-primary" type="reset">清空</button>
</div>
</form>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7-dist"></script>
</body>
js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" >
<style>
.errstyle {
color: red;
}
b{
color: red;
font-weight: bolder;
}
</style>
<script src=""></script> //引入jQuery库
<script src=""></script>
<script>
$(function(){
var a=false;
var b=false;
var c=false;
var d=false;
var e=false;
$("#username").blur(function(){
if($(this).val().length == 0) {
$("#errorname").html("用户名不为空");
a=false;
}
else{
var reg = /^[0-9a-zA-Z]{4,10}$/;
if(!reg.test($(this).val())) {
$("#errorname").html("4-10个英文字母或数字");
a=false;
}
else{
$("#errorname").html("");
a=true;
}
}
});
$("#password").blur(function() {
if($(this).val().length == 0) {
$("#errorpassword").html("密码不为空");
b=false;
}
else{
var reg = /^[0-9a-zA-Z]{6,15}$/;
if(!reg.test($(this).val())) {
$("#errorpassword").html("6-15个英文字母或数字");
b=false;
}
else{
$("#errorpassword").html("");
b=true;
}
}
});
$("#confirm").blur(function() {
if($(this).val().length == 0) {
$("#errorconfirm").html("确认密码不为空");
c=false;
}
else {
if($(this).val() != $("#password").val()) {
$("#errorconfirm").html("与密码输入不一致");
c=false;
}
else {
$("#errorconfirm").html("");
c=true;
}
}
});
$("#email").blur(function() {
if(!$("#xq").is(":checked") || $("#yy").is(":checked") || $("#ps").is(":checked") || $("#dq").is(":checked")){
$("#errorhobbies").html("至少一个兴趣爱好");
e=false;
}
else{
$("#errorhobbies").html("");
e=true;
}
if($(this).val().length == 0) {
$("#erroremail").html("电子邮箱不为空");
d=false;
}
else{
var reg=/^\w+@\w+(.\w+)+$/;
if(!reg.test($(this).val())) {
$("#erroremail").html("电子邮箱格式错误");
d=false;
}
else{
$("#erroremail").html("");
d=true;
}
}
});
$("#submit").click(function() {
if(a && b && c && d && e){
$("form").submit();
}
else{
alert("有信息填写错误");
return false;
}
});
});
</script>
</head>
效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery正则验证注册页面经典实例
本文实例讲述了jQuery正则验证注册页面功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则验证注册页面</title> <style type="text/css"> .red{ color:#cc0000; font-weigh
-
jquery 弹出层注册页面等(asp.net后台)
[一]需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查, 3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择. 5:尽力提高用户体验,吸引用户注册. [二]无图无真相. 1:简化后的页面: 2:浮出文字提示和圆角边框: 3:支持民意调查(异步提交) 4:自动检索推荐用户名(测试数据) 5:数据有效性验证 6:日历 7:支持拖拽 8:滑入显示 9:over [三]代码分析1.弹出层的制作, a.先引用这三个: 复制代码 代码如下: <script src=&qu
-
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
页面样式代码: 复制代码 代码如下: <style type="text/css"> .header { background-color: #CCCCCC; color: White; font-size: x-large; } .content { background-color: White; font-weight: lighter; font-size: small; } .content td { text-align: left; } .mandatory
-
jquery实现员工管理注册页面
本文实例为大家分享了jquery实现员工管理注册页面的具体代码,供大家参考,具体内容如下 代码展示 HTML页面代码 <body> <div class="container"> <h2 class="text-center">用户注册</h2> <form action="Baidu.html" method="post" class="form-horizon
-
node.js实现登录注册页面
本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下 首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <
-
ASP.NET实现个人信息注册页面并跳转显示
题目 新建一个MVC项目,利用HTML.CSS.JS.jQuery.Ajax.jQuery UI等技术设计一个个人信息注册页面.当点击"提交"按钮时,跳转到新的页面显示录入信息. 基本要求: 用户名为6-10个小写字母(小写使用正则式验证,且用户名不能为"wustzz" –用Ajax技术来检测):密码为6位数字,确认密码不一致时有提示:籍贯使用级联(jquery实现):Email必须符合Email格式:手机是11位(假设规定以1569开头):出生年月使用jQuery
-
node.js+jQuery实现用户登录注册AJAX交互
最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观.特记录一下. 1.login.ejs实现form框架 <form > <ul> <li><p>用户名</p></li> <li><input type="text" name="username" id="username"></
-
JQ技术实现注册页面带有校验密码强度
主要介绍使用jQuery实现带有校验密码强度的注册页面,当然要想生成一个漂亮的带有密码强度检验的注册页面要有相关插件和类库配合,具体内容如下: 相关的插件和类库 complexify - 一个密码强度检验jQuery插件 justgage - 一个兼容性良好的仪表盘类库 主要功能 注册中包含一个密码强度检验组件,用户需要设置一定强度的密码才可以注册 密码强度使用仪表盘类库justgage来显示,不同的强度的密码将显示不同的颜色 密码强度符合要求后,显示注册按钮 代码说明 HTML: <div
-
浅析jquery如何判断滚动条滚到页面底部并执行事件
本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. 首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.
-
微信小程序 教程之注册页面
系列文章: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册程序 微信小程序--Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面渲染完成 onShow Function 生命周期函数--监听页面
-
IDEA简单实现登录注册页面
application.yml spring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:3306/bd1906?serverTimezone=GMT%2B8 driver-class-name: com.mysql.cj.jdbc.Driver server: port: 8080 Controller层 @Controller public class loginController { @