一个简单的表单验证

最新推荐文章于 2020-08-16 16:59:05 发布
最新推荐文章于 2020-08-16 16:59:05 发布
阅读量893 收藏 2
点赞数 1
分类专栏： 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinghen1234/article/details/78996886
版权 
<!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">
        #div01 {
            border: 1px solid aquamarine;
            height: 600px;
            width: 600px;
            margin: auto;
            margin-top: 50px;
        }

        span {
            color: red;
        }
    </style>

    <body>
        <div id="div01">

            <form action="log.html">
                用 户 名:<input type="text" id="username" placeholder="请输入用户名">
                <span id='state1'></span><br/><br/> 密码:
                <input type="password" id="userpass" placeholder="请输入密码">
                <span id='state2'></span><br/><br/> 重复密码:
                <input type="password" id="userpass2" placeholder="请再次输入密码">
                <span id='state3'></span><br/><br/> 昵称:
                <input type="text" id="name" placeholder="请输入昵称">
                <span id='state4'></span><br/><br/> 出生日期:
                <input type="text" id="time" placeholder="请输入你出生日期">
                <span id='state5'></span><br/><br/> 性别：
                <input type="radio" id="sex">男
                <input type="radio" id="sex">女<br />
                <span id='state6'></span><br/><br/>身份证号码:
                <input type="text" id="t" placeholder="请输入身份证号码">
                <span id='state7'></span><br/><br/> 手机号码:
                <input type="text" id="repass" placeholder="请输入手机号码">
                <span id='state8'></span><br/><br/> QQ:
                <input type="text" id="QQ" placeholder="请输入手机号码">
                <span id='state9'></span><br/><br/> 邮　　箱:
                <input type="email" id="em" placeholder="请输入邮箱">
                <span id='state10'></span><br/><br/>

                <input type="submit" value="注册" name="sub" />
                <input type="reset" value="重置" style="margin-left: 50px;" />
            </form>
        </div>

        <script type="text/javascript">
            var flas = true; //标识符    
            //账号验证  
            $("#username").blur(function() {
                //取出账号值  
                var name = $("#username").val();
                var state1 = $("#state1");
                //      账号必须为字母+数字的组合，不能出现特殊字符  
                varreg = /^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/;
                //alert(varreg.test(name))  

                if(name == null || name == "") {
                    state1.html("不能为空")
                    flas = false;
                    return
                } else {
                    flas = true;
                }

                if(!varreg.test(name)) {
                    state1.html("必须是字母+数字不能出现特殊字符")

                    flas = false;
                    return
                } else {
                    state1.html("✔")
                    flas = true;
                }
            })

            //密码验证  
            var flas1 = true; //标识符  
            $("#userpass").blur(function() {
                var pass = $("#userpass").val();
                var state2 = $("#state2"); //
                //密码规则为首字母大写+字母+数字的组合，不得出现特殊字符  
                var patrm1 = /^[A-Z][a-z0-9]*$/;
                if(pass == null || pass == "") {
                    state2.html("不能为空")
                    flas1 = false;
                    return
                } else {
                    flas1 = true;
                }

                if(!patrm1.test(pass)) {
                    state2.html("密码规则为首字母大写+字母+数字的组合，不得出现特殊字符。")

                    return
                } else {
                    state2.html("✔")
                    flas1 = true;
                }

            })

            //重复密码验证  
            var flas2 = true;
            $("#userpass2").blur(function() {
                var pass1 = $("#userpass").val(); //  
                var pass2 = $("#userpass2").val();
                var state3 = $("#state3"); //
                if(pass2 == null || pass2 == "") {
                    state3.html("不能为空")
                    flas2 = false;
                    return
                } else {
                    flas2 = true;
                }

                if(pass2 != pass1) {
                    state3.html("密码不一样")
                    flas2 = false;
                    return
                } else {
                    state3.html("✔")
                    flas2 = true;
                }

            })

            //昵称验证  
            var flas3 = true;
            $("#name").blur(function() {
                var nc = $("#name").val();
                var state4 = $("#state4"); //
                if(nc == null || nc == "") {
                    state4.html("不能为空")
                    flas3 = false;
                    return
                } else {
                    flas3 = true;
                }

                if(nc.indexOf("我是昵称1") > -1 || nc.indexOf("我是昵称2") > -1) {
                    state4.html("昵称重复的")
                    flas3 = false;
                    return
                } else {
                    state4.html("✔")
                    flas3 = true;
                }

            })

            //日期验证  
            var flas4 = true;
            $("#time").blur(function() {
                var rq = $("#time").val();
                var state5 = $("#state5");
                if(rq == null || rq == "") {
                    state5.html("不能为空")
                    flas4 = false;
                    return
                } else {
                    state5.html("✔")
                    flas4 = true;
                }

            })

            //性别验证  
            var flas9 = true; //标识符  
            $("#sex").blur(function() {
                var sex = $("#sex").val();
                var state6 = $("#state6");
                if(sex == null || sex == "") {
                    state6.html("不能为空")
                    flas9 = false;
                    return;
                } else {
                    state6.html("✔")
                    flas9 = true;
                }

            })

            //身份证验证  
            var flas5 = true; //标识符  
            $("#t").blur(function() {
                var sfz = $("#t").val();
                var state7 = $("#state7"); //
                //判断是纯数据  
                var aa = /^\d+$/

                if(sfz == null || sfz == "") {
                    state7.html("不能为空")
                    flas5 = false;
                    return

                } else {
                    flas5 = true;
                }

                if(!aa.test(sfz) || sfz.length != 18) {
                    state7.html("必须是纯数字并且不能小于18位")
                    flas5 = false;

                } else {
                    state7.html("✔")
                    flas5 = true;
                }

            })

            //手机号验证  
            var flas6 = true; //标识符  
            $("#repass").blur(function() {
                var tell1 = $("#repass").val();
                var state8 = $("#state8");
                //
                //以1开头的正则表达式  
                var aa = /^1\d{10}$/

                if(tell1 == null || tell1 == "") {
                    state8.html("不能为空")
                    flas6 = false;

                } else {
                    flas6 = true;
                }

                if(!aa.test(tell1) || tell1.length != 11) {
                    state8.html("必须是纯数字11位1开头")
                    flas6 = false;
                    return;
                } else {
                    state8.html("✔")
                    flas6 = true;
                }

            })

            //QQ验证  
            var flas7 = true; //标识符  
            $("#QQ").blur(function() {
                    var qq = $("#QQ").val();
                    var state9 = $("#state9");
                    //
                    var aa = /^\d+$/;
                    if(qq == null || qq == "") {
                        state9.html("不能为空")
                        flas7 = false;
                        return;
                    } else {
                        flas7 = true;
                    }

                    if(qq.length < 5) {
                        state9.html("必须是大于5位")
                        flas7 = false;
                        return;
                    } else {
                        state9.html("✔")
                        flas7 = true;
                    }

                })


                //邮箱验证
            var flas8 = true; //标识符  
            $("#em").blur(function() {
                var em = $("#em").val();
                var state10 = $("#state10");
                //邮箱的正则表单达式   
                var aa = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                if(em == null || em == "") {
                    state10.html("不能为空")
                    flas8 = false;
                    return;
                } else {
                    state10.html("✔")
                    flas8 = true;
                }

                if(!aa.test(em)) {
                    state10.html("邮箱格式不正确")
                    flas8 = false;
                    return;
                } else {
                    state10.html("✔")
                    flas8 = true;
                }

            })


            //注册
            $("#submit").click(function() {
                //判断标识符都是true   
                if(flas9 == true && flas8 == true && flas == true && flas1 == true && flas2 == true && flas3 == true && flas4 == true && flas5 == true && flas6 == true && flas7 == true) {

                    alert("注册成功")
                } else {
                    alert("注册失败")
                }

            })
        </script>
    </body>

</html>
XinHenz
关注
专栏目录
简单的表单验证写法
weixin_53126056的博客
12-21 567
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> /* 1、用户名不能为空 2、用户名必须在6-14位之间 3、用户名只能有数字和字母组成，不能有其它符号（正则表达式） 4、密码和确认密码一致 5、统一失去焦点验
一个简单的实时表单验证
mia1106的博客
04-20 1675
以 number为例子。首先，在html部分只要包含：label, 表单，以及错误信息提示。这里有错误信息，是为了保证我们的表单不是在提交那一刻才提示你填写的不对，而是在你输入时或者输入完，这个预备的表单错误信息就可以显示出来。&lt;div&gt; &lt;label&gt; email:&lt;/label&gt; &lt;input type="email" required id=...
简单的表单验证
10-26
一个包含了js的简单的表单验证，下载后随意粘贴代码。
简单表单校验
qq_36074058的博客
05-03 229
在网上进行注册或者填写一些表单数据时，如果数据不和要求，通常会进行提示。   如下图，注册邮箱时所出现的一些不合要求的数据：     那么，如何实现这个效果？  demo1.html function check() { var mail = $(".a").val(); if (mail == "") { $("#sp").text('
登录表单验证简单实现
weixin_30918633的博客
12-25 323
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>实现带样式的表单验证 </title> <style> table{width:700px} /*父元素下的第1个，第n个，最后一个td子元素*...
jquery实现一个简单的表单验证实例
10-22
这篇文档提供了一个使用jQuery实现简单表单验证的实例，本文将深入探讨该实例中的关键知识点。 首先，表单验证的目的是为了确保用户提交的数据满足预设的条件，比如是否为空、格式是否正确、是否符合特定的业务规则...
JS实现的简单表单验证功能完整实例
10-19
总的来说，这个实例提供了一个基础的JavaScript表单验证模板，涵盖了基本的字符串长度、数据类型和正则表达式验证。实际应用中，你可以根据需要添加更多复杂的验证规则，如手机号码验证、密码强度验证等，以满足更...
form_php简单表单验证页面_
10-03
本项目名为“form_php简单表单验证页面”，显然它是一个面向初学者的实例，旨在教授如何使用PHP进行基本的表单数据验证。 在Web应用中，表单验证是必不可少的一环，它用于确保用户提交的数据符合预期的格式和规则，...
form表单中的onblur事件
12-08
onblur事件，鼠标离开表单input框时触发的事件
QtFormValidator：C ++ Qt的数据验证
02-28
介绍 QT没有提供足够的工具来验证用户的输入（至少v5.15）。 我们可以使用QDoubleValidator，QIntValidator和QRegularExpressionValidator。 因此，如果要验证某些字符串，则必须使用诸如isEmpty（）/ isNull（）之类的内置方法，或者编写手动的字符串长度检查； 对于数字，我们必须使用许多if / else语句编写代码。 此外，它也没有说明如何分离业务逻辑的验证代码（如MVC模式）的方式。 快速开始 使用QtFormValidator的最简单方法是将其作为git子模块添加到您的项目中。 要添加库，请执行以下步骤： 创建一个新的subdirs项目。 如果您的项目已经具有TEMPLATE = subdirs则跳过此步骤。 添加一个新的应用程序子项目。 例如，“ Qt控制台应用程序”。 如果您已经拥有此步骤，并且上一步为true，
简单表单验证
极客神殿
03-11 366
简单的表单验证 index.js $(document).ready(function() { var check = { regs: { name: /\b(^['A-Za-z0-9]{4,20}$)\b/, phone: /^1[3,4,5,6,7,8,9]{1}[0-9]{9}$/, active...
简易的表单验证
weixin_44846862的博客
08-16 300
简易的后台登录界面 在这个给大家制作一个简易的后台登录界面，他使用到了：HTML，CSS,JS相关的知识，实现的大致功能就是：账户和密码不能为空，才能够登录（实现的功能比较简易，所以在点击登录之后我们就进入到百度中） 实现过程 HTML代码部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title>
做一个简单的表单验证功能
xin的博客
05-11 775
做一个简单的表单验证功能 不说了，先贴上代码 <script> function checkForm() { var form = document.getElementById('test_form'); var name = document.getElementById('name').value; ...
简单的form表单验证
erdouzhang
04-25 752
在线演示 html:<div class="box"> 语文: <input type="text" id="txt"/> <span id="result">请输入成绩</span> </div>css:<style> .box { text-align: center; margin:100px auto; } span {
JavaScript之简单的表单验证
qq_41320857的博客
08-03 3316
当输入的数据符合要求时，显示              当输入的数据不符合要求时，显示              css样式： &lt;style type="text/css"&gt; body { background: #ccc; } label { wi...
JQuery之简单表单验证
Wisdom—Yoga—TaciturnKnight（WYT）
10-22 1450
JQuery之简单表单验证 jsp部分： *旧密码: *新密码: *确认新密码:
JS—简单表单验证代码
万国
02-27 460
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 280px; margin: 20px auto; bord...
写一个简单的表单验证
最新发布
06-02
好的，这里提供一个简单的表单验证的示例代码，它通过 JavaScript 实现： HTML 代码： ```html 用户名： <input type="text" id="username" name="username"><br> 密码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值