用户注册表表单验证

最新推荐文章于 2020-04-17 08:30:04 发布
最新推荐文章于 2020-04-17 08:30:04 发布
阅读量660 收藏 5
点赞数
文章标签： 注册界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z110655/article/details/87192983
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
    <title>注册</title>
    <style>
        #togglePassword1{
            position: absolute;
            top: 0;
            right: 0;
            z-index: 9999;
            display: block;
            pointer-events: auto;
           cursor: pointer;
        }
        #togglePassword2{
            position: absolute;
            top: 0;
            right: 0;
            z-index: 9999;
            text-align: center;
            pointer-events: auto;
            cursor: pointer;
        }
        /*统一设置*/
        *{
            margin: 0;
            padding: 0;

        }
        ul,li{
            list-style-type: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        /*高亮提示*/
        .active{
            background: #eeeeee;
        }
        /*搜索提示*/
        #searchTips{
            position: absolute;
            z-index: 9999;
            border: 1px solid #ccc;
            top: 38px;
            width: 100%;
            font-size: 12px;
            text-align: left;
            background: #fff;
            display: none;
        }
        #searchTips li{
            padding-left: 5px;
            color: #789;
            line-height: 30px;
            cursor: pointer;
        }
        #searchTips li:hover{

            background: #eee;
        }
        #searchTips li > a{
            float: right;
            margin-right: 5px;
            display: none;
        }
        #searchTips li:hover > a{
            display:block ;
        }
    </style>
</head>
<body>

<h2 class="page-header" style="text-align: center">新员工注册</h2>

<form id="form1" class="form-horizontal">
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>员工姓名</label>
        <div class="col-sm-8">
            <input type="text" id="empName" name="empName"
                   placeholder="请输入员工姓名" class="form-control" autocomplete="off" />
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>登录账号</label>
        <div class="col-sm-8 " >
            <input type="text" id="empLoginName" name="empLoginName"
                   placeholder="请输入登录账号" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>初始密码</label>
        <div class="col-sm-8">

                <input type="password" id="empPwd" name="empPwd"
                       placeholder="请输入初始密码" class="form-control">
                    <span class="btn btn-info glyphicon glyphicon-eye-close" id="togglePassword1" data-toggle = "dropdown"/>
                    <span id = "check"   style="color: red" hidden></span>

        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>确认密码</label>
        <div class="col-sm-8">
            <input type="password" id="empPwd2" name="empPwd2"
                   placeholder="请再次输入密码" class="form-control">
           <span class="
            btn btn-info glyphicon glyphicon-eye-close" id="togglePassword2" data-toggle = "dropdown"/>
            <span id = "check2" style="color: red" hidden> </span>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2">电子邮件</label>
        <div class="col-sm-8">

            <input type="text" id="empEmail" name="empEmail"
                           placeholder="请输入电子邮件" class="form-control" />

                <ul id="searchTips">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>


        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>电话号码</label>
        <div class="col-sm-8">
            <input type="text" id="empPhone" name="empPhone"
                   placeholder="请输入电话号码" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>身份证号码</label>
        <div class="col-sm-8">
            <input type="text" id="idCard" name="IDCard"
                   placeholder="请输入身份证号码" class="form-control" />
            <span class="idcard" style="color: red" hidden>请输入正确的身份证号码</span>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2">出生年月日</label>
        <div class="col-sm-8">
            <input type="text" id="birthday" name="birthday"
                   placeholder="请选择出生年月日" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2">入职日期</label>
        <div class="col-sm-8">
            <input type="text" id="empHiredate" name="empHiredate"
                   placeholder="请选择入职日期" class="form-control" />
        </div>
    </div>

    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-3">地址</label>
        <div id="distpicker5" class="col-sm-offset-1">
            <div class="form-group  col-sm-8">
                <label class="sr-only" for="province10">Province</label>
                <select class="col-sm-2" id="province10"></select>

                <label class="sr-only" for="city10">City</label>
                <select class="col-sm-3" id="city10"></select>

                <label class="sr-only" for="district10">District</label>
                <select class="col-sm-3" id="district10"></select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2"><span style="color: red">*</span>职务</label>
        <div class="col-sm-8">
            <select name="job.jobId" id="jobId" class="form-control">
                <option value="">请选择职务</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-offset-1 col-sm-2">自我介绍</label>
        <div class="col-sm-8">
            <textarea placeholder="请输入自我介绍（200字以内）" id="empInfo" name="empInfo" rows="5" class="form-control"></textarea>
        </div>
    </div>
    <div class="form-group" align="center">
        <div >
            <input id="addBtn" type="button" value="增加员工" class="btn btn-success"/>
            <input type="button" value="取消" class="btn btn-danger" onclick="history.back();" />
        </div>
    </div>
</form>
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/province/distpicker.data.min.js"></script>
<script src="js/province/distpicker.min.js"></script>
<script src="js/province/main.js"></script>
<script type="text/javascript" src="js/global.js" ></script>
<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
<script type="text/javascript" src="js/layer/layer.js" ></script>
<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js" ></script>
<script>

        $("#togglePassword1").click(function () {
            var hClass1 = $("#togglePassword1").hasClass("glyphicon-eye-close");

            if (hClass1 == true) {
                $("#togglePassword1").removeClass("glyphicon-eye-close");
                $("#togglePassword1").addClass("glyphicon-eye-open");
                $("#empPwd").attr("type", "text");
            } else if (hClass1 == false) {
                $("#togglePassword1").removeClass("glyphicon-eye-open");
                $("#togglePassword1").addClass("glyphicon-eye-close");
                $("#empPwd").attr("type", "password");
            }
        })


    $("#togglePassword2").click(function () {
        var hClass2 = $("#togglePassword2").hasClass("glyphicon-eye-close");
        if (hClass2 == true) {
            $("#togglePassword2").removeClass("glyphicon-eye-close");
            $("#togglePassword2").addClass("glyphicon-eye-open");
            $("#empPwd2").attr("type", "text");
        } else if (hClass2 == false) {
            $("#togglePassword2").removeClass("glyphicon-eye-open");
            $("#togglePassword2").addClass("glyphicon-eye-close");
            $("#empPwd2").attr("type", "password");
        }
    })


$(function() {

    //获得元素对象
    var empEmail = $('#empEmail');
    var searchTips = $('#searchTips');
    var tipsItem = $('li');
    //选中元素索引
    var keyIndex = 0;

    empEmail.bind('input propertychange', function () {
        if(empEmail.val().length > 0 ) {
            searchTips.show();
            $('#searchTips li').eq(0).html($('#empEmail').val() + '@163.com');
            $('#searchTips li').eq(1).html($('#empEmail').val() + '@qq.com');
            $('#searchTips li').eq(2).html($('#empEmail').val() + '@gmail.com');
            $('#searchTips li').eq(3).html($('#empEmail').val() + '@126.com');
            $('#searchTips li').eq(4).html($('#empEmail').val() + '@hotmail.com');
            $('#searchTips li').eq(5).html($('#empEmail').val() + '@yahoo.com');
            $('#searchTips li').eq(6).html($('#empEmail').val() + '@yahoo.com.cn');
            $('#searchTips li').eq(7).html($('#empEmail').val() + '@live.com');
            $('#searchTips li').eq(8).html($('#empEmail').val() + '@sohu.com');
            $('#searchTips li').eq(9).html($('#empEmail').val() + '@sina.com');
            //遍历所有的li，循环添加事件
            for (var i = 0; i < tipsItem.length - 1; i++) {

                //li单击事件

                tipsItem[i].onclick = function() {

                    empEmail.val($(this).html());

                    searchTips.hide();

                    return;

                }

            }


            //高亮函数
            function highlightItem(index) {

                //去掉所有的高亮
                for (var i = 0; i < tipsItem.length; i++) {

                    tipsItem[i].className = '';

                }if(index != -1)
                    tipsItem[index].className = 'active';
            }

//document键盘按下事件
            document.onkeydown = function() {

                /* //判断提示框是否显示
                 var display = searchTips.attr("display");
                 if (display != 'block')
                     return;*/

                e = window.event || e;

                //esc键隐藏提示内容
                if (e.keyCode == 27) {
                    resetTips();
                    searchInput.blur();
                }

                //下箭头
                if (e.keyCode == 40) {

                    keyIndex ++;

                    if (keyIndex > tipsItem.length - 1)
                        keyIndex = 0;

                    highlightItem(keyIndex);

                }
                //上箭头
                if (e.keyCode == 38) {

                    keyIndex --;

                    if (keyIndex < 0)
                        keyIndex = tipsItem.length - 1;

                    highlightItem(keyIndex);

                }
                //回车键
                if(e.keyCode == 13 ){
                    empEmail.val($('.active').html());
                    resetTips();
                }

            }

        }
        else {
            searchTips.hide();
        }

    })


    //高亮函数
    function highlightItem(index) {

        //去掉所有的高亮
        for (var i = 0; i < tipsItem.length; i++) {

            tipsItem[i].className = '';

        }if(index != -1)
            tipsItem[index].className = 'active';
    }
//重置提示函数
    function resetTips(){

        searchTips.css('display','none');
        keyIndex = -1;
        highlightItem(-1);

    }

//密码验证，密码不能为空，且6~12位

    $("#empPwd").blur(function(){
        r = /^.{6,12}$/;
        if ($("#empPwd").val().length > 0 && !r.test($("#empPwd").val())) {
            $('#check').show();
            $('#check').text("初始密码为6~12位的字符");
           /* $("#empPwd").focus();*/
            return false;
        }else{
            $('#check').hide();
        }
    })
    //确认密码验证，必须两次密码输入一致

    $("#empPwd2").blur(function(){
        if ($("#empPwd2").val().length> 0&& $("#empPwd2").val() != $("#empPwd").val()) {
            $('#check2').show();
            $('#check2').text("确认密码必须要和初始密码一致");
            /*$("#empPwd2").focus();*/
            return false;
        }else{
            $('#check2').hide();
        }
    })
    var IDCard = /^[1-9]\d{7}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    //用来判断身份证，身份证号有15位和18位之分，所以写两个，用或者

    $("#idCard").blur(function(){
        if($('#idCard').val().length >0 &&!IDCard.test($('#idCard').val())){
            $('.idcard').show();
        }else{
            $('.idcard').hide();
        }
    })

    //绑定日历插件到出生年月
    $('#birthday').datetimepicker({
        lang:'ch',
        format:'Y-m-d',
        formatDate:'Y-m-d',
    });
    //绑定日历插件到入职日期
    $('#empHiredate').datetimepicker({
    lang:'ch',
    format:'Y-m-d',
    formatDate:'Y-m-d',
    });

//动态生成部门列表
$.getJSON(baseUrl + '/dept/query',function(data){

$.each(data, function(index,el) {
var opt = '<option value="' + el.deptId + '">' + el.deptName + '</option>';
$('#deptId').append(opt);
});

})
.error(function(){
layer.msg('请求部门列表失败');
});

//动态生成职务列表
$.getJSON(baseUrl + '/job/query',function(data){

$.each(data, function(index,el) {
var opt = '<option value="' + el.jobId + '">' + el.jobName + '</option>';
$('#jobId').append(opt);
});

})
.error(function(){
layer.msg('请求职务列表失败');
});

//验证用户名是否存在
$('#empLoginName').change(function(){

$.post(baseUrl + '/emp/checkLoginName',{empLoginName:$('#empLoginName').val()},function(data){

if (data == 'true') {
layer.msg('这个登录名已经有人使用了');
$('#empLoginName').focus();
}
})
.error(function(){
layer.msg('请求用户名失败');
});

});

//表单验证函数
function checkForm() {

//正则表达式
var r;

//姓名验证
var empName = $('#empName');

if (empName.val() == '' || empName.val().length > 10) {
layer.msg('员工姓名不能为空且最多10字符');
empName.focus();
return false;
}

//登录名验证
var empLoginName = $('#empLoginName');

if (empLoginName.val() == '' || empLoginName.val().length > 20) {
layer.msg('登录名不能为空且最多20字符');
empLoginName.focus();
return false;
}

//检查用户名是否存在（ajax同步请求）
var flag = 'true';

$.ajax({
url:baseUrl + '/emp/checkLoginName',
type:'POST',
dataType:'text',
data:{empLoginName:empLoginName.val()},
async:false //同步请求
})
.done(function(data){
flag = data;
})
.fail(function(){
layer.msg('请求用户名失败');
});

if (flag === 'true') {
layer.msg('这个登录名已经有人使用了');
empLoginName.focus();
return false;
}
if($('#empPwd').val()==null){
    layer.msg('请输入密码');
    return false;
}
    if($('#empPwd2').val()==null){
        layer.msg('请输入确认密码');
        return false;
    }
//邮箱验证，不能为空，且必须符合邮箱格式
var empEmail = $("#empEmail");

r = /(^\w+@\w+(\.[a-z]{2,3}){1,2}$)/;

if (!r.test(empEmail.val()) || empEmail.val().length > 80) {
layer.msg("请输入符合格式的电子邮箱名称，最大80字符");
empEmail.focus();
return false;
}

//电话号码验证，必须是手机号码格式
var empPhone = $("#empPhone");

r = /^1[3-8]\d{9}$/;

if (!r.test(empPhone.val())) {
layer.msg("请输入符合格式的电话号码");
empPhone.focus();
return false;
}

//入职日期，不能为空
var empHiredate = $('#empHiredate');

if (empHiredate.val() == "") {
layer.msg("入职日期不能为空，请选择一个日期");
empHiredate.focus();
return false;
}

//工资验证，最多6位整数，2位小数
var empSalary = $('#empSalary');

r = /^(0|[1-9]\d{0,5}(\.\d{1,2})?)$/;

if (!r.test(empSalary.val())) {
layer.msg("员工工资必须为1~6位整数或者1~6位整数加2位小数");
empSalary.focus();
return false;
}

//部门验证，必须选择部门
var deptId = $('#deptId');

if (deptId.val() == "") {
layer.msg("员工必须有一个部门");
deptId.focus();
return false;
}

//职务验证，必须选择职务
var jobId = $('#jobId');

if (jobId.val() == "") {
layer.msg("员工必须有一个职务");
jobId.focus();
return false;
}

//员工简介不能为空，最多200字
var empInfo = $('#empInfo');

if (empInfo.val().length > 200) {
layer.msg("员工简介不能超过200字");
empInfo.focus();
return false;
}

//判断员工工资是否符合职务工资范围
var jobMinSal;
var jobMaxSal;

$.ajax({
url:baseUrl + '/job/get',
type:'POST',
dataType:'json',
data:{jobId:jobId.val()},
async:false //同步请求
})
.done(function(data){
jobMinSal = parseInt(data.jobMinSal);
jobMaxSal = parseInt(data.jobMaxSal);
})
.fail(function(){
layer.msg('请求职务数据失败');
});

if ( parseInt(empSalary.val()) < jobMinSal || parseInt(empSalary.val()) > jobMaxSal ) {
empSalary.focus();
layer.msg('工资必须符合职务的工资在' + jobMinSal + '到' + jobMaxSal + '之间');
return false;
}

return true;
}

//增加员工
$('#addBtn').click(function(){

//表单验证
if ( !checkForm() )
return;

//表单数据序列化
var param = $('#form1').serialize();

$.post(baseUrl + '/emp/add',param,function(data){

var flag = window.confirm('增加员工成功,是否继续添加新员工？');

if (flag) {
$('#form1').get(0).reset();
} else {
location.href = 'QueryEmp.html';
}

})
.error(function(){
layer.msg('增加员工请求失败');
});



});

})
</script>
</body>
</html>

jquery-1.12.2.min.js
distpicker.data.min.js
distpicker.min.js
province/main.js
global.js
bootstrap.js
layer.js"
jquery.datetimepicker.js
bootstrap.css
jquery.datetimepicker.css

修羽°
关注
用户注册表单验证
csdn_wyl的博客
09-13 9559
大概是一些文本框的验证，单选按钮，复选框的验证，通过表单名字获取表单，再调用表单里的内容。验证文本框用正则表达式。通过这次练习，增加了对javascript运用的熟练程度。 效果图 步骤 重要代码截图 文本框 单选 复选 验证所有 js代码<script> //页面加载函数 function iniState() {
用户注册表单验证源码.zip
05-23
一、源码特点 目前只能验证检测，不可实现注册功能二、功能介绍 本源码是一个动态页面改善过后的注册用户界面过程，利用ajax和webservice实现异步无刷新的用户信息验证，只是演示了用户注册检测功能，具体的注册...
注册表单验证
03-29
一个简单的注册页面，其中包括了一些简单的函数，可以判断输入的信息是否合法
注册表单验证的模块
hongfuqiang的博客
10-15 309
$(function(){             var flag=false;             var flag2=false;             var flag3=false;             var flag4=false;             $("#email").blur(function(){                var email
用户登陆注册表单校验
gfvvfb的博客
02-17 370
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; paddin...
yii用户注册表单验证实例
01-20
本文实例讲述了yii用户注册表单验证实现方法。分享给大家供大家参考，具体如下： 视图层：register.php <?php //使用小物件生成form元素 $form=$this->beginWidget('CActiveForm'); ?> <!--用户名--> &...
PHP实现的用户注册表单验证功能简单示例
01-02
本文实例讲述了PHP实现的用户注册表单验证功能。分享给大家供大家参考，具体如下： 注册界面 register.html 用户注册 <form method=post action=register_verify.php> <input type=text placeholder=...
H5用户注册表单页 注册模态框!
11-25
在本实例中，我们探讨了如何使用HTML5（H5）的新特性来创建一个用户注册表单页，其中包括了各种类型的输入字段以及表单验证功能。以下是对这些知识点的详细说明： 1. **HTML5 表单新特性**：HTML5引入了多种新的...
JS注册表单验证
10-15
网上常见的用JS编写的注册表单验证的代码，非常实用哦
用户注册表单验证(Ajax验证)
09-14
用户注册表单验证(Ajax验证),Ajax写的，注册表单验证。
表单验证(注册登录填写基本信息等)
12-01
使用方法例：
用户注册_表单验证
08-13 420
<br /><br />提交成功后转向另一页<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <br />Transitional//EN" <br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-<br />transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Cont
JS>登陆注册表单验证
lujiebin的博客
04-17 3112
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span { color: red; font-size: 12px; } ...
JavaScript基础—表单验证
csdn2479993071的博客
09-27 204
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var names = ["tom","jack","lily","韩梅梅"]; //表单验证 function my
表单验证：用户注册
weixin_30815427的博客
02-24 107
// 判断输入字符的长度function getLength(){ // 得到汉字的长度:\x00-xff 单字节 // [^\x00-xff]意思为双字节 return str.replace(/[^\x00-xff]/g,"xx").length; } function findStr(str, n){ var tmp = 0; for (var i = 0; i <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值