正则表达式实现表单验证

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form action="index2.html" onsubmit="return fun()">
            <p>
                学生姓名：<input type="text" id="stu_name" placeholder="请输入学生姓名" onblur="fun1()">
                <span id="s1"></span>
            </p>
            
            <p>
                学生学号：<input type="text" id="stu_num" placeholder="请输入学生学号" onblur="fun2()">
                <span id="s2"></span>
            </p>
            
            <p>
                登录密码：<input type="text" id="stu_pwd" placeholder="请输入登录密码" onblur="fun3()" />
                <span id="s3"></span>
            </p>
            
            <p>
                联系方式：<input type="text" id="stu_tel" placeholder="请输入学生联系方式" onblur="fun4()">
                <span id="s4"></span>
            </p>
            
            <p>
                联系邮箱：<input type="text" id="stu_email" placeholder="请输入学生联系邮箱" onblur="fun5()"/>
                <span id="s5"></span>
            </p>
            
            <p>
                <input type="submit" value="立即添加">
            </p>
        </form>
    </body>
</html>
<script>
    function fun(){
        if(fun1() && fun2() && fun3() && fun4() && fun5()){
            return true
        }else{
            return false
        }
    }
    
    function fun1(){
        /*验证学生姓名为中文，2-6位*/
        //正则表达式
        var reg = /^[\u4e00-\u9fa5]{2,6}$/
        //获取学生姓名
        var studentName = document.getElementById('stu_name').value
        //验证正则表达式
        var result = reg.test(studentName)
        //判断验证的结果
        if(result){
            document.getElementById('s1').innerHTML = '<font color="green">验证通过</font>'
            return true
        }else{
            document.getElementById('s1').innerHTML = '<font color="red">学生姓名必须由2-6位中文组成</font>'
            return false
        }
    }
    
    function fun2(){
        /*学号必须是11位数字组成*/
        //正则表达式
        var reg = /^\d{11}$/
        //获取学号
        var sutdentNum = document.getElementById('stu_num').value
        //验证表达式
        var result = reg.test(sutdentNum)
        //判断
        if(result){
            document.getElementById('s2').innerHTML = '<font color="green">验证通过</font>'
            return true
        }else{
            document.getElementById('s2').innerHTML = '<font color="red">学生学号只能由11位数字组成</font>'
            return false
        }
    }
    
    function fun3(){
        var reg = /^\w{5,10}$/
        var studentPwd = document.getElementById('stu_pwd').value
        var result = reg.test(studentPwd)
        if(result){
            document.getElementById('s3').innerHTML = '<font color="green">验证通过</font>'
            return true
        }else{
            document.getElementById('s3').innerHTML = '<font color="red">登录密码由5-10位数字、字母、下划线组成</font>'
            return false
        }
    }
    
    function fun4(){
        /*手机号码允许13、15、16、18、19开头*/
        var reg = /^1[35689]\d{9}$/
        var studentTel = document.getElementById('stu_tel').value
        var result = reg.test(studentTel)
        if(result){
            document.getElementById('s4').innerHTML = '<font color="green">验证通过</font>'
            return true
        }else{
            document.getElementById('s4').innerHTML = '<font color="red">手机号是11位数字，由13、15、16、18、19开头</font>'
            return false
        }
    }
    
    function fun5(){
        //邮箱只能是QQ或者163邮箱，并且只能是com或者cn结尾
        var reg = /^\w+@(qq|163)\.(com|cn)$/
        var studentEmail = document.getElementById('stu_email').value
        var result = reg.test(studentEmail)
        if(result){
            document.getElementById('s5').innerHTML = '<font color="green">验证通过</font>'
            return true
        }else{
            document.getElementById('s5').innerHTML = '<font color="red">邮箱只能是QQ或者163，并且结尾只能是cn或者com</font>'
            return false
        }
    }
    
</script>
效果图：
posted @ 2021-03-26 14:38 车车大人阅读(231) 评论(0) 收藏举报
刷新页面返回顶部