用正则表达式实现有提示信息的表单验证

最新推荐文章于 2020-02-23 21:04:53 发布

onlySeungRi

最新推荐文章于 2020-02-23 21:04:53 发布

阅读量1.6k

点赞数

文章标签：正则表达式表单提交

本文链接：https://blog.csdn.net/onlySeungRi/article/details/80513659

版权

代码如下

<style>
.arror{ color: red;}
</style>
<body>
<form action="" method="get" οnsubmit="return tijiao()">

//提交事件是加给form表单元素
    <ul>
        <li><label for="id">学号：</label><input name="id" type="text" class="txt"/></li>
        <li><label for="name">姓名：</label><input name="name" type="text" class="txt"/></li>
        <li><label for="age">年龄：</label><input name="age" type="text" class="txt"/></li>
        <li><label for="sex">性别：</label><input name="sex" type="text" class="txt"/></li>
        <li><label for="address">住址：</label><input name="address" type="text" class="txt"/></li>
        <li><label for="tel">电话：</label><input name="tel" type="text" class="txt"/></li>
        <li><label for="email">邮箱：</label><input name="email" type="text" class="txt"/></li>
        <li><input type="reset"/><input type="submit"/></li>
    </ul>
</form>
<script>
    var txt=document.getElementsByClassName("txt")
    function tijiao(){
        var len=document.getElementsByClassName("error")
        panduan()
        //方法1
        if(len.length){       //也可直接对数字进行判断，判断条件等于0则执行括号外面的值即else的值否则即执行if成立的值
            return false
    }
        return true
    //方法2
       /* if(len.length!=0){
            return false
        }
        return true*/
    }
    function panduan()
    {
        if(txt[0].value=="")
        {
            fengzhuan(0,"*不能为空！",false);
        }
        else{
            if(txt[0].value.length!=8)
            {
                fengzhuan(0,"*位数不正确！",false);
            }
            else{
               /* var b=/^[^A-Za-z]{8}|$/g*/
               /* var b=/^\D*$/;*/   //只有匹配元素全都是非数字时才能返回值，否则一直返回null
                /*var b=/\D/g; */         //匹配所有的非数字元素默认只找到第一个，用g则默认全局查找
                var b=/\D/g;
                if(txt[0].value.match(b)!=null){
                    fengzhuan(0,"*格式不正确!",false);
                }
                else{
                    fengzhuan(0,"正确",true);
                }
            }
        }
        if(txt[1].value=="")
        {
            fengzhuan(1,"*不能为空！",false);
        }
        else{
            fengzhuan(1,"*正确！",true);
        }
        if(txt[2].value=="")
        {
            fengzhuan(2,"*不能为空！",false);
        }
        else{
            if(txt[2].value<0||txt[2].value>100)
            {
                fengzhuan(2,"*年龄输入有误！",false);
            }
            else{
                fengzhuan(2,"*年龄输入正确！",true);
            }
        }
        if(txt[3].value=""){
            fengzhuan(3,"格式错误",false)
        }
        else{
           if(txt[3].value!="男"&&txt[3].value!="女"){
               fengzhuan(3,"性别错误",false)
           }
        }
        var a=/\d{11}/g
        if(txt[5].value.match(a)==null){
            fengzhuan(5,"格式错误",false)
        }
        else{
            fengzhuan(5,"正确",true)
        }
        var x=/[0-9a-zA-Z]{6,8}\@[a-z]{2}\.com/

//注意正则表达式中非字符的转义
        if(txt[6].value.match(x)==null){
            fengzhuan(6,"格式错误",false)
        }
        else{
            fengzhuan(6,"正确",true)
        }
    }
    function fengzhuan(num,count,res){
        //每次点击引用时先将之前的span清除
        //方法1，替换span里的值
        //方法2，移除span元素

Var er=txt[num].parentNode.getElementsByClassName("error")[0];
        if(er!=null){
            er.remove()      //每次提交时先将对应的错误提示移除，移除时要先找到他对应的父元素
        }
        var span=document.createElement("span")
        span.className="error";
        span.innerHTML=count;
        //将span元素查到li里
        //li为input的父元素则先查找到input的父元素用parentNode查找
        txt[num].parentNode.appendChild(span)
        //如果是true的话，移除没有错误提示的span，只留下有错误提示的span
        //用其个数来判断表单是否提交
        if(res)
        {
            span.remove();
        }
    }

onlySeungRi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用正则表达式实现有提示信息的表单验证

代码如下&lt;style&gt; .arror{ color: red;} &lt;/style&gt;&lt;body&gt;&lt;form action="" method="get" onsubmit="return tijiao()"&gt;//提交事件是加给form表单元素 &lt;ul&gt; &lt;li
复制链接

扫一扫