第十七篇 JS验证form表单

2017-09-13 20:38:11来源:CSDN作者:longfeng995人点击

分享

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类可能是多个,所以它也是一个数组哦。
这样写代码,会多太杂,我们有很多方法来减少代码,下节课我们学习‘参数’,参数特别重要,以后的工作的项目中几乎都有参数的哟!

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台