【表单验证】一个新手做的 大家多多指教

最新推荐文章于 2021-05-06 07:34:02 发布
最新推荐文章于 2021-05-06 07:34:02 发布
阅读量301 收藏
点赞数
分类专栏： HTML 文章标签： 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuncle/article/details/54973101
版权

这里写图片描述


如果有什么不对的地方，请大家多多支持！



第一种：凑合着看吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册-个人用户</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
    <style>
        body {
            font-family: Arial, "宋体", Lucida, Verdana, Helvetica, sans-serif;
            font-size: 12px;
            color: #333;
            line-height: 150%;
            background: #f2f2f2;
        }

        .hide{display:none;}

        .focus,.error {
            color: #e4393c;
            line-height: 36px;
            height: 36px;
            position: absolute;
            top: 0px;

            width: 260px;
            padding: 0 5px;
            background: #FFEBEB;
            border: 1px solid #ffbdbe;
        }

        .error span,.focus span {
            padding: 5px 0;
            line-height: 13px;
            display: block;
        }

        .focus {
            color: #666;
            width: 260px;;
            line-height: 36px;
            background: #f7f7f7;
            border: 1px solid #dddddd;
        }

        .regist {
            width: 990px;
            padding: 0;
            margin: 0 auto;
            zoom: 1;
        }


        .mc {
            padding: 30px 0 20px;
            border: solid #dddddd; border-width : 0px 1px 1px;
            background: #FFF;
            overflow: hidden;
            zoom: 1;
            border-width: 0px 1px 1px;
        }

        .form {
            float: left;
            width: 750px;
            font-size: 12px;
        }

        .form label,.form input,.form select,.form textarea,.form button,.form .label {
            float: left;
            font-size: 12px;
        }

        .item {
            padding-top: 9px;
            height: 60px;
            line-height: 34px;
            position: relative;
            z-index: 1;
        }

        .label {
            float: left;
            width: 190px;
            text-align: right;
            font-size: 14px;
            color: #999;
            padding-right: 10px;
        }

        .input {
            float: left;
            position: relative;
            width: 270px;
            overflow: visible;
        }

        .text {
            float: none;
            width: 275px;
            height: 37px;
            line-height: 32px;
            border: 1px solid #cccccc;
            font-size: 14px;
            font-family: arial, "宋体";
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="regist"> 
        <div class="mc">
            <form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();">
                <div class="item">
                    <span class="label">用户名：</span>
                    <div class="input">
                        <input type="text" id="username" name="username" class="text">

                        <label id="username_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">请设置密码：</span>
                    <div class="input">
                        <input type="password" id="password" name="password" class="text">

                        <label id="pwd_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">请确认密码：</span>
                    <div class="input">
                        <input type="password" id="pwdRepeat" name="pwdRepeat" class="text">

                        <label id="pwdRepeat_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">验证邮箱：</span>
                    <div class="input">
                        <input type="text" id="mail" name="mail" class="text">

                        <label id="mail_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">&nbsp;</span>
                    <input type="submit" class="btn-img" id="registsubmit" value="立即注册" />
                </div>
            </form>
        </div>   
    </div>


     <script>
        window.onload = function(){
            // 1. 用户名
            $("#username").focus(function(){
                /* 获取焦点
                var username_msg = $("#username_msg");
                username_msg.text("4-20位字符，支持英文、数字及'-'、'_'组合");
                username_msg.attr("class","focus");
                */
                elemFocus("username_msg","4-20位字符，支持英文、数字及'-'、'_'组合");

            }).blur(userValidator);
            // 2. 密码
            $("#password").focus(function(){
                elemFocus("pwd_msg","6-20位字符，可使用字母、数字的组合");
            }).blur(pwdValidator);
            // 3. 确认密码
            $("#pwdRepeat").focus(function(){
                elemFocus("pwdRepeat_msg","6-20位字符，可使用字母、数字的组合");
            }).blur(pwdRepeatValidator);
            // 4. Email
            $("#mail").focus(function(){
                elemFocus("mail_msg","完成验证后，可以使用该邮箱登录和找回密码");
            }).blur(emailValidator);
        }

        // 定义函数 - 通用的信息提示
        function elemFocus(eleId,text){
            var ele_msg = $("#"+eleId);
            ele_msg.text(text);
            ele_msg.attr("class","focus");
        }

        // 定义验证用户名的函数
        function userValidator(){
            // 获取用户名输入的值
            var value = $("#username").val();
            // 获取用于显示提示信息的元素
            var username_msg = $("#username_msg");
            // 验证逻辑
            if(value==""||value==null){
                username_msg.text("用户名不能为空");
                username_msg.attr("class","error");
                return false;
            }else if(value.length<4||value.length>20){
                username_msg.text("用户名的长度不正确");
                username_msg.attr("class","error");
                return false;
            }else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
                username_msg.text("用户名输入不正确");
                username_msg.attr("class","error");
                return false;
            }
            // 验证通过修改正确样式
            if(!username_msg.hasClass("hide")){
                username_msg.text("");
                username_msg.attr("class","hide");
            }
            return true;
        }
        // 定义验证密码的函数
        function pwdValidator(){
            var value = $("#password").val();
            var pwd_msg = $("#pwd_msg");
            if(value==""||value==null){
                pwd_msg.text("密码不能为空");
                pwd_msg.attr("class","error");
                return false;
            }else if(value.length<6||value.length>20){
                pwd_msg.text("密码的长度不正确");
                pwd_msg.attr("class","error");
                return false;
            }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
                pwd_msg.text("密码输入不正确");
                pwd_msg.attr("class","error");
                return false;
            }
            if(!pwd_msg.hasClass("hide")){
                pwd_msg.text("");
                pwd_msg.attr("class","hide");
            }
            return true;
        }
        // 定义确认密码验证的函数
        function pwdRepeatValidator(){
            var value = $("#pwdRepeat").val();
            var pwdRepeat_msg = $("#pwdRepeat_msg");
            var pwd = $("#password").val();
            if(value==""||value==null){
                pwdRepeat_msg.text("密码不能为空");
                pwdRepeat_msg.attr("class","error");
                return false;
            }else if(value.length<6||value.length>20){
                pwdRepeat_msg.text("密码的长度不正确");
                pwdRepeat_msg.attr("class","error");
                return false;
            }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
                pwdRepeat_msg.text("密码输入不正确");
                pwdRepeat_msg.attr("class","error");
                return false;
            }else if(value != pwd){
                pwdRepeat_msg.text("两次密码输入不一致");
                pwdRepeat_msg.attr("class","error");
                return false;
            }
            if(!pwdRepeat_msg.hasClass("hide")){
                pwdRepeat_msg.text("");
                pwdRepeat_msg.attr("class","hide");
            }
            return true;
        }
        // 定义Email验证的函数
        function emailValidator(){
            var value = $("#mail").val();
            var email_msg = $("#mail_msg");
            if(value==""||value==null){
                email_msg.text("Email不能为空");
                email_msg.attr("class","error");
                return false;
            }else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
                email_msg.text("Email格式不正确");
                email_msg.attr("class","error");
                return false;
            }
            if(!email_msg.hasClass("hide")){
                email_msg.text("");
                email_msg.attr("class","hide");
            }
            return true;
        }
        function validateForm(){
            if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

第二种：将就着看吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            form {
                width: 570px;
                height: 300px;
                margin: 100px auto;
            }

            label {
                width: 64px;
                float: left;
                clear: left;
                height: 36px;
                line-height: 36px;
                margin-top: 10px;
            }

            input {
                width: 300px;
                height: 36px;
                line-height: 36px;
                margin-top: 10px;
                text-indent: 8px;
                font-size: 16px;
                font-family: "微软雅黑";
                border: 1px solid #ccc;
                float: left;
            }

            #sub {
                width: 302px;
                height: 40px;
                border: 1px solid #ccc;
                background: #888;
                color: #fff;
                font-size: 18px;
                text-indent: 0;
            }

            .spa {
                height: 36px;
                line-height: 36px;
                width: 204px;
                display: inline-block;
                float: left;
                font-size: 12px;
                color: #BD362F;
                text-indent: 10px;
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <form action="" method="post">
            <label id="name">姓&nbsp;名：</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
            <label id="phone">手机号：</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
            <label id="address">地&nbsp;址：</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
            <label>&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="submit" value="注册" id="sub" />
        </form>
        <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                    $("#username").focus()
                }
                /************************  失焦判断  **********************************/
            $("input").blur(function() {
                    $(".spa").css("color", "#BD362F")
                    if($(this).is("#username")) { //姓名判断
                        var na = /^[\u4E00-\u9FA5]{2,4}$/
                        if($("#username").val() != "") {
                            if(!(na.test($("#username").val()))) {
                                $(".spa1").text("请输入2-4个汉字");
                                $(this).css("border", "1px solid #BD362F")
                                return false;
                            } else if(na) {
                                $(".spa1").text("");
                                return true;
                            }
                        } else {
                            $(".spa1").text("");
                        }
                    }
                    if($(this).is("#userphone")) { //手机号判断
                        var ph = /^1[3|5|7|8|][0-9]{9}$/
                        if($("#userphone").val() != "") {
                            if(!(ph.test($("#userphone").val()))) {
                                $(".spa2").text("请输入正确手机号");
                                $(this).css("border", "1px solid #BD362F")
                                return false;
                            } else if(ph) {
                                $(".spa2").text("");
                                return true;
                            }
                        } else {
                            $(".spa2").text("");
                        }
                    }

                    if($(this).is("#useraddress")) { //地址判断
                        var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
                        if($("#useraddress").val() != "") {
                            if(!(ad.test($("#useraddress").val()))) {
                                $(".spa3").text("请输入正确地址");
                                $(this).css("border", "1px solid #BD362F")
                                return false;
                            } else if(ad) {
                                $(".spa3").text("");
                                return true;
                            }
                        } else {
                            $(".spa3").text("");
                        }
                    }
                })
                /********************** 聚焦提示 ************************/
            $("input").focus(function() {
                    if($(this).is("#username")) {
                        $(".spa1").text("四个汉字").css("color", "#aaa")
                        $(this).css("border", "1px solid #aaa")
                    }
                    if($(this).is("#userphone")) {
                        $(".spa2").text("11位手机号码").css("color", "#aaa")
                        $(this).css("border", "1px solid #aaa")
                    }
                    if($(this).is("#useraddress")) {
                        $(".spa3").text("最少8个字符（汉字、字母和数字）").css("color", "#aaa")
                        $(this).css("border", "1px solid #aaa")
                    }
                })
                /*********************** 提交验证 ***************************/
            $("#sub").click(function() {
                var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则
                var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则
                var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则
                if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
                    return true;
                } else {
                    if($("#username").val() == "") {
                        $(".spa1").text('请你填写用户名')
                    }
                    if($("#userphone").val() == "") {
                        $(".spa2").text('请你填写手机号')
                    }
                    if($("#useraddress").val() == "") {
                        $(".spa3").text('请你填写地址')
                    }
                    return false;
                }
            })
        </script>
    </body>
</html>
邹大叔
关注
专栏目录
表单验证案例
Rowse的博客
04-07 1337
正则表达式验证表单案例如下： HTML: 在input标签外写一个label标签的作用是点击label标签input标签内的光标就会出现,然后在input标签内加入placeholder元素在文本框内显示出提示的字样,例如：2-16字符，建议英文字母!然后设置id名,再加上span标签,最后加上br标签换行以达到可观的效果。 <div class="container" id="dv"> <h3>注册页面</h3> <label for="u..
表单验证（邮件和text必输项）
u011705317的专栏
06-18 425
一个简单的表单验证
Xinghen的博客
01-07 901
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script> <style type="text/css">
javascript 不用一句if语句 对表单进行验证
潘敬
05-09 1432
其实是有用到，只不过是简写了！ 代码： function check(){ //用户名 var nickname=$("#nickname"); var nickname_error=$("#nickname_error"); //地址错误 var address_error=$("#address_error"); //详细地址 var detail=$("#d
移动端表单验证
weixin_33738578的博客
06-25 819
http://code.ciaoca.com/javascript/cxValidation/demo/attach-form
我是新手，多多指教
kekeboge21的专栏
01-08 369
我是一个新来的， 有很多不会的， 还请大家多多指教， 这里谢谢了
用JS进行表单验证
Eve_panda的博客
02-11 221
菜鸟新手，初入前端，初来CSDN，请各位大神多多指教。 这是用JS代码进行表单验证，代码和图片如下： Document
php+js表单验证数字,JS实现提交表单前的数字及邮箱校检功能
weixin_29006701的博客
04-15 116
在项目开发中经常会遇到表单提交功能，今天小编抽空给大家分享JS实现提交表单前的数字及邮箱校检功能，对js感兴趣的朋友参考下JS实现提交表单前的数字及邮箱校检的功能吧个人觉得一个工程中让用户提交表单时，用户提交的数据类型及内容不确定度都很大，用户不一定会完全理解设计者意思。所以提交表单前的校检是必须的，这里简单分享几个校检方法，本人新手，还请多多指教。function toVaild(){var a...
第一个MVC3做的企业空间项目总结(本人新手，如果有高手进，请多多指教，我不会不对的地方请指正)...
weixin_33860528的博客
11-29 96
这两天刚做完一个MVC3项目，因为以前项目经验就很少，之后MVC 0基础就直接做了这个MVC3的项目，所以中间出了很多问题，所以今天就写下第一篇博文总结一下MVC3出现的问题，以及在这个项目中发现的一些小窍门。 1.在做MVC3中做无刷新 方法执行是这样的，要通过一个参数获得一个另一个参数，通过另一个参数得到另一个对象 三层中用的ajax.dll是从前往后执行的，通过i获...
留言板源代码
07-21
【描述】：“新手做的，多多指教。”这句描述暗示了该源代码可能包含一些初级错误或不足之处。对于经验丰富的开发者来说，这可能是一个教学机会，他们可以通过指导新手改进代码来帮助其成长。同时，这也意味着对于想...
关于新手自动化测试用例的编写
不期而遇，不言而喻
03-18 8816
有很多测试人员应该有这样的疑虑，自动化测试要怎么去做，现在我把自己的一些学习经验分享给大家，希望对你们有帮助，有说的不好的地方，还请多多指教！ 对于测试人员来说，不管进行功能测试还是自动化测试还是性能测试都是需要编写测试用例，所以我们必须先要了解清楚手工测试用例与自动化测试用例的一些特点，才能更好的开展自动化测试工作 第一篇——自动化测试用例设计 1.1手工测试用例和自动化测试用例 手工测试用例是...
梦学谷管理系统（一）
飞仔的思维空间
05-06 603
系列文章目录 文章目录系列文章目录前言一、项目架构二、项目技术栈三、项目所有模块总结 前言 最后决定模仿 梦学谷管理系统 做一个项目。可能时间隔得有点久了，之前学的东西很多都差不多忘记了，做这个项目基本上都是看着官方的文档一点一点做的。在家里也免不了有各种各样的事情耽误了项目的进度。现在终于差不多做好了，分享出来，新手上路，如有错误，请多多指教 一、项目架构 element-ui mock.js moment axios api封装请求 二、项目技术栈 前端 Vue+Vue-router+V
利用JS获取数值判断年龄
Brgen的博客
05-03 3151
首先先了解一下JS JS的全称是 JavaScript JavaScript 是世界上最流行的编程语言。 这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习 此教程只适合入学者 首先将基础样
【技巧】div超出文字隐藏并显示省略号
zuncle的博客
02-22 2832
HTML代码如下：<div class="logisNews rt"> <div class="newsTitle"> <h3> <img src="img/icons/news.png" /> <span>新闻资讯</span> <a class="rt" href="#">更多>></a></h3>
【技巧】当屏幕宽度更换时变换调用css
zuncle的博客
06-02 784
HTML代码如下：<div class="abc"></div>JS代码如下：<script> $(function(){ $(window).resize(function() { var ww = $(window).width(); if( ww > 1000 ){ $('abc').rem
rhino grasshoper 框内物体排列（附视频）.gh
最新发布
10-18
【闭合线内物体按方向移动/排列】https://www.bilibili.com/video/BV1z1WfeSEWu?vd_source=b420114c993138474d2e93d83ead77a5
kwant-1.4.3-cp38-cp38-win_amd64.whl
10-18
kwant-1.4.3-cp38-cp38-win_amd64.whl
jQuery Form表单验证实战示例
在网页开发中，表单验证是一个至关重要的环节，它确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery是一个广泛使用的JavaScript库，提供了方便的API来简化DOM操作和事件处理。jQuery ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值