溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用jquery實現員工管理注冊頁面”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用jquery實現員工管理注冊頁面”吧！
代碼展示
HTML頁面代碼
<body> <div class="container"> <h3 class="text-center">用戶注冊</h3> <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實現員工管理注冊頁面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
