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>
效果展示
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。