第十七篇 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类可能是多个，所以它也是一个数组哦。

 

这样写代码，会多太杂，我们有很多方法来减少代码，下节课我们学习‘参数’，参数特别重要，以后的工作的项目中几乎都有参数的哟！