JS页面校验

最新推荐文章于 2022-07-30 05:15:00 发布

_Rick

最新推荐文章于 2022-07-30 05:15:00 发布

阅读量797

点赞数

分类专栏： Java 前端

本文链接：https://blog.csdn.net/weixin_44718300/article/details/88726877

版权

Java 前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

结构：

1.导入正则表达式校验包：https://blog.csdn.net/weixin_44718300/article/details/88726653

2.页面校验.HTML


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--
        引入外部的js文件
    -->
    <script type="text/javascript" src="../js/regutils.js" ></script>



    <script>
        /*
            1. 确定事件 : onfocus
            2. 事件要驱动函数
            3. 函数要干一些事情: 修改span的内容
        */
        function showTips(spanID,msg){
            //首先要获得要操作元素 span
            var span = document.getElementById(spanID);
            span.innerHTML = msg;
        }
        /*
            校验用户名:
            1.事件: onblur  失去焦点
            2.函数: checkUsername()
            3.函数去显示校验结果
        */
        function checkUsername(){
            //获取用户输入的内容
            var uValue = document.getElementById("username").value;
            //对输入的内容进行校验
            //获得要显示结果的span
            var span = document.getElementById("span_username");
            if(uValue.length < 6){
                //显示校验结果
                span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                return false;
            }else{
                span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            }
        }

        /*
         密码校验
         */
        function checkPassword(){
            //获取密码输入
            var uPass = document.getElementById("password").value;

            var span = document.getElementById("span_password");

            //对密码输入进行校验
            if(uPass.length < 6){
                span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                return false;
            }else{
                span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
                return true;
            }
        }

        /*
         确认密码校验
         * */
        function checkRePassword(){
            //获取密码输入
            var uPass = document.getElementById("password").value;

            //获取确认密码输入
            var uRePass = document.getElementById("repassword").value;


            var span = document.getElementById("span_repassword");

            //对密码输入进行校验
            if(uPass != uRePass){
                span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
                return false;
            }else{
                span.innerHTML = "";
                return true;
            }
        }

        /*
         校验邮箱
         * */
        function checkMail(){
            var umail = document.getElementById("email").value;

            var flag = checkEmail(umail);

            var span = document.getElementById("span_email");
            //对邮箱输入进行校验
            if(flag){
                span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                return true;
            }else{
                span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
                return false;
            }
        }

        function checkForm(){
            var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
            return flag;
        }

    </script>
</head>
<body>
<form action="www.baidu.com" onsubmit="return checkForm()" >
    用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
    密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
    确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
    邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
    手机号:<input type="text" id="text" /><br />

    <input type="submit" value="提交" />
</form>
</body>
</html>

_Rick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS页面校验

结构：1.导入正则表达式校验包：https://blog.csdn.net/weixin_44718300/article/details/887266532.页面校验.HTML<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫