jquery实现员工管理注册页面

更新时间：2021年08月01日 13:28:18 作者：&蚂蚁

这篇文章主要为大家详细介绍了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>

效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用imgareaselect辅助后台实现图片上传裁剪
这篇文章主要为大家详细介绍了利用imgareaselect辅助后台实现图片裁剪的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Jquery实现仿京东商城省市联动菜单
这篇文章主要介绍了Jquery实现仿京东商城省市联动菜单的简单实例演示，可以选择对应省、市、县，希望大家可以喜欢。
2015-11-11
Jquery对select的增、删、改、查操作
这篇文章主要介绍了Jquery对select的增、删、改、查操作的方法,需要的朋友可以参考下
2015-02-02
jQuery实现固定在网页顶部的菜单效果代码
这篇文章主要介绍了jQuery实现固定在网页顶部的菜单效果,通过jquery页面scroll事件及边距计算实现网页的菜单固定效果,非常简单实用,需要的朋友可以参考下
2015-09-09
jQuery插件支持同一页面被多次调用
这篇文章主要介绍了jQuery插件支持同一页面被多次调用的相关资料,需要的朋友可以参考下
2016-02-02
jQuery插件imgAreaSelect基础讲解
关于ImgAreaSelect, 是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解，需要的的朋友参考下吧
2017-05-05
JQuery从头学起第三讲
看了前面两讲的54淘客网友，我想应该对JQuery已经有了个初步的认识，知道如何用JQuery选择器来获取控件的值，今天我们主要讲使用JQuery对常用控件的取值。
2010-07-07
jQuery(非HTML5)可编辑表格实现代码
单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容
2012-12-12
jQuery实现的鼠标滚轮控制图片缩放功能实例
这篇文章主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
2017-10-10
jquery实现的简单轮播图功能【适合新手】
这篇文章主要介绍了jquery实现的简单轮播图功能,涉及jQuery基于定时器的事件响应与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-08-08