jquery實現(xiàn)員工管理注冊頁面

更新時間：2021年08月01日 13:28:18 作者：&螞蟻

這篇文章主要為大家詳細介紹了jquery實現(xiàn)員工管理注冊頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)員工管理注冊頁面的具體代碼，供大家參考，具體內容如下

代碼展示

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">確認密碼<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個英文字母或數(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("確認密碼不為空");
                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插件Easyui設置datagrid的pageNumber導致兩次請求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設置datagrid的pageNumber導致兩次請求問題的解決方法,較為詳細的描述了出現(xiàn)的問題、問題的原因及相應的解決方法,需要的朋友可以參考下
2016-08-08
詳解ECharts使用心得總結
這篇文章主要介紹了詳解ECharts使用心得總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
IE下支持文本框和密碼框placeholder效果的JQuery插件分享
這篇文章主要介紹了IE下支持文本框和密碼框placeholder效果的JQuery插件分享,本文給出插件源碼和使用示例,需要的朋友可以參考下
2015-01-01
jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果,涉及jQuery事件響應及頁面元素屬性動態(tài)變換操作技巧,需要的朋友可以參考下
2016-09-09
jquery實現(xiàn)兼容瀏覽器的圖片上傳本地預覽功能
圖片上傳本地預覽功能代碼在網(wǎng)上可以搜索很多，但同時可以兼容瀏覽器的話就多了，本文有個不錯的示例，感興趣的朋友可以參考下
2013-10-10
基于jQuery實現(xiàn)在線選座之高鐵版
除了購買電影票在線選座，我們還接觸過飛機機艙選座，隨著科技的發(fā)展，之后火車、汽車都會支持在線選座，下面給大家分享基于jQuery實現(xiàn)在線選座之高鐵版，需要的朋友可以參考下
2015-08-08
JQuery+EasyUI輕松實現(xiàn)步驟條效果
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。通過本文給大家介紹JQuery+EasyUI輕松實現(xiàn)步驟條效果，需要的朋友參考下
2016-02-02
jquery.AutoComplete.js中文修正版(支持firefox)
jquery.AutoComplete.js中文修正版(支持firefox),注意是修正了輸入中文的一些bug,需要的朋友可以測試下。
2010-04-04
jquery自定義放大鏡效果
這篇文章主要為大家詳細介紹了jquery自定義放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
使用jquery實現(xiàn)鼠標滑過彈出更多相關信息層附源碼下載
當要在有限的空間展示更多的信息時，我們經常會采取鼠標滑過彈出更多相關信息層，提高互動性。尤其可以應用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場景，本文給大家分享使用jquery實現(xiàn)鼠標滑過彈出更多相關信息層附源碼下載，感興趣的朋友參考下
2015-11-11