jquery实现员工管理注册页面
时间：2022-02-12 09:20:24 | 栏目：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>
效果展示
