zoukankan      html  css  js  c++  java
  • 第十七篇 JS验证form表单

    JS验证form表单

     
    这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么用户输入了汉字、字母、下划线、特殊符号等,我们就可以直接给他一个错误提示,表单也就停止提交,格式必须正确才能提交,做一个判断限制,让别人的操作跟着我们走,而且还能增强安全性!同学千万不要认为这种判断没用,你想想,如果用户发送手机短信验证,他的手机号格式输入错了,但是自己没发现,并且他的这个格式,我们是可以判断出的,即:手机号都是11位吧,加入他输入了12为,10位呢,自己却没有发现,那他眼睛也不好或者其他原因,那不是会责怪我们写的程序有问题,短信不给他发送过去吗。
    总之,简单的说,前端验证是需要的,那么这节课,我们就演示一个登录页面的表单验证,并且,用正则表达式!
    html和css样式,老师就写简单点,同学能看得懂就行,重点是JS这一块哈!来,看代码:
     
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS验证form表单,使用正则表达式</title>
    </head>
    <body>
        <h3>js验证表单</h3>
    
        <form action="#" method="post">
            <p>
                用户名: <input type="text"/>
            </p>
            <p>
                <!--letter-spacing 给它添加间距,这里用的是em单位 它比px大-->
                <span style="letter-spacing: 1em;"></span>码: <input type="password"/>
            </p>
            <p>
                <input type="submit" value="提交"/>
            </p>
        </form>
    </body>
    </html>
     
    那么这样,一个简单静态表单出来了,我们点击提交,浏览器后面就会出现一个‘#’,代表已经成功提交了,无数据,或者乱填都可以提交,所以下面,看全面的代码:
     
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS验证form表单,使用正则表达式</title>
    </head>
    <body>
        <h3>js验证表单</h3>
    <!-- form表单里加了一个onsubmit事件,当点击提交按钮就触发这个事件 -->
        <form action="#" method="post" onsubmit="return myform()">
            <p>
                用户名: <input type="text"/>
                <!--格式错误,用span做提示-->
                <span style="color:red;font-size: 12px;display: none;" class="tishi">
                    必须两位字符及以上
                </span>
            </p>
            <p>
                <!--letter-spacing 给它添加间距,这里用的是em单位 它比px大-->
                <span style="letter-spacing: 1em;"></span>码: <input type="password"/>
                <!--格式错误,用span做提示-->
                <span style="color:red;font-size: 12px;display: none;" class="tishi">
                    密码只能由6-30位数字和字母组成
                </span>
            </p>
            <p>
                <input type="submit" value="提交"/>
            </p>
        </form>
    <script>
        //forms 是找到当前页面所有form表单,而数组下标[0] 是找到第一个form
        var form = document.forms[0];
        //表单获取到了,我们先用正则来写格式规范
        //var是关键字,用来声明变量的
        var yonghu = /^[A-Za-z0-9_--u4e00-u9fa5]{2,}$/;
        //yonghu,它的正则表达意思是,必须是数字或者大小写26位字母,或者中文,后面一串就是支持汉字的意思,花括号里的2,是指必须两位及以上字符
        var mima = /^[0-9a-zA-Z]{6,30}$/;
        //密码,这里面很简单,只能是数字或者26位大小写字母,花括号里的意思是字符长度为最小6位,最大30位
        //我们用 elements来获取form表单下的input  select  textarea这一类,属于form表单的元素
        function yanzheng(){
            //先隐藏它,这样它显示了之后,输入正确再次点击,即可隐藏
            document.getElementsByClassName('tishi')[0].style.display="none";
            document.getElementsByClassName('tishi')[1].style.display="none";
            //正则判断form下第一个input,如果错误返回一个假,并给出提示,
            if(!yonghu.test(form.elements[0].value)){
                //出现提示!
                document.getElementsByClassName('tishi')[0].style.display="inline";
                return false;
            }else if(!mima.test(form.elements[1].value)){
                //出现提示!
                document.getElementsByClassName('tishi')[1].style.display="inline";
                return false;
            }
            //如果上面的判断为假,则返回false,上面的判断都正确,就直接跳过if里的代码,执行下面的 true
            return true;
        }
        function myform(){
            //判断 yanzheng函数,它如果返回过来的是true,我们就判断,是真就返回真
            if(yanzheng())
                return true;
    
            //如果yanzheng函数返回的是false则不会执行上面的 true,就会执行线面的false,表单就无法提交
            return false;
        }
    </script>
    </body>
    </html>
     
    这里面要注意的是,forms是找到表单,[0]这类是数组格式,里面的0是它的下标,找到第一个,1则是第二个,以此类推。getElementsByClassName是找到class类,之前的getElementsByID就是找到id,而这里找到的class类,因为页面里class类可能是多个,所以它也是一个数组哦。
     
    这样写代码,会多太杂,我们有很多方法来减少代码,下节课我们学习‘参数’,参数特别重要,以后的工作的项目中几乎都有参数的哟!
     
  • 相关阅读:
    5.19 省选模拟赛 T1 小B的棋盘 双指针 性质
    5.15 省选模拟赛 容斥 生成函数 dp
    5.15 省选模拟赛 T1 点分治 FFT
    5.15 牛客挑战赛40 B 小V的序列 关于随机均摊分析 二进制
    luogu P4929 【模板】舞蹈链 DLX
    CF 878E Numbers on the blackboard 并查集 离线 贪心
    5.10 省选模拟赛 拍卖 博弈 dp
    5.12 省选模拟赛 T2 贪心 dp 搜索 差分
    5.10 省选模拟赛 tree 树形dp 逆元
    luogu P6088 [JSOI2015]字符串树 可持久化trie 线段树合并 树链剖分 trie树
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590431.html
Copyright © 2011-2022 走看看