jquery實現(xiàn)員工管理注冊頁面
更新時間：2021年08月01日 13:28:18 作者：&螞蟻
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)員工管理注冊頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)員工管理注冊頁面的具體代碼，供大家參考，具體內(nèi)容如下
代碼展示
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個英文字母或數(shù)字" 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個英文字母或數(shù)字" 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">確認(rèn)密碼<b>*</b></label>
<div class="col-md-3">
<input id="confirm" type="password" placeholder="確認(rèn)密碼" 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>技術(shù)部</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個英文字母或數(shù)字");
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個英文字母或數(shù)字");
b=false;
}
else{
$("#errorpassword").html("");
b=true;
}
}
});
$("#confirm").blur(function() {
if($(this).val().length == 0) {
$("#errorconfirm").html("確認(rèn)密碼不為空");
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>
效果展示
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery圖片輪播插件代碼的相關(guān)資料,在各大網(wǎng)站都可以簡單圖片輪播效果，非常實用，需要的朋友可以參考下2016-05-05
jQuery判斷元素是否顯示 是否隱藏的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示 是否隱藏的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
當(dāng)點擊圖片時，圖片會加紅顯示。2009-05-05
jQuery UI是一套非常好用的jQuery Tools庫，目前已經(jīng)發(fā)布的最新版本是1.8.4。在我自己的使用過程中，總有一些不爽。因為我下載的那個包里默認(rèn)的主題樣式是下圖這樣的，使用起來很難和具體的網(wǎng)頁風(fēng)格去配合。2010-09-09
這篇文章主要給大家分享了一些Jquery api 速查表，十分的全面，這里推薦給大家,需要的朋友可以參考下2015-01-01
contains選擇符是指對象中包括指定內(nèi)容的對象本身2010-04-04
如何確保JavaScript的執(zhí)行順序 之jQuery.html并非萬能鑰匙
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之jQuery.html深度分析》中，我們揭示了jQuery.html函數(shù)之所以能在各種瀏覽器下保持動態(tài)JS順序執(zhí)行，其秘密在于 – 同步AJAX獲取外部JavaScript。2011-03-03
這篇文章主要介紹了15個常用的jquery代碼片段，對大家學(xué)習(xí)jquery程序設(shè)計有所幫助,需要的朋友可以參考下2015-12-12
jquery獲取file表單選擇文件的路徑、名字、大小、類型
今天小編就為大家分享一篇關(guān)于jquery獲取file表單選擇文件的路徑、名字、大小、類型，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
在jQuery 中只要用行uaMatch()這個函數(shù)。用到的關(guān)鍵點有:1.regExp.exec(str)；2.navigator.userAgent;2011-02-02