结构：

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" οnsubmit="return checkForm()" >

    用户名:<input type="text" id="username" οnfοcus="showTips('span_username','用户名长度不能小于6')" οnblur="checkUsername()" οnkeyup="checkUsername()" /><span id="span_username"></span><br />

    密码:<input type="password" id="password" οnfοcus="showTips('span_password','密码长度不能小于6')" οnblur="checkPassword()" οnkeyup="checkPassword()"/><span id="span_password"></span><br />

    确认密码:<input type="password" id="repassword" οnfοcus="showTips('span_repassword','两次密码必须一致')" οnblur="checkRePassword()" οnkeyup="checkRePassword()" /><span id="span_repassword"></span><br />

    邮箱:<input type="text" id="email" οnfοcus="showTips('span_email','邮箱格式必须正确')" οnblur="checkMail()" /><span id="span_email"></span><br />

    手机号:<input type="text" id="text" /><br />

    <input type="submit" value="提交" />

</form>

</body>

</html>

JS页面校验的更多相关文章

  1. js页面跳转整理

    js页面跳转整理 js方式的页面跳转1.window.location.href方式    <script language="javascript" type=" ...

  2. js获取当前时间&js 页面时钟

    js获取当前时间 //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = ...

  3. js页面跳转参考代码大全

    整理一下JS页面跳转参考代码 第一种:     <script language=/"javascript/" type=/"text/javascript/&qu ...

  4. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  5. js页面传参数时，参数值包含特殊字符的处理

    js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...

  6. js页面跳转 和 js打开新窗口 方法

    js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...

  7. 常用的JS页面跳转代码调用大全

    一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...

  8. JS页面延迟执行一些方法(整理)

    一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中que ...

  9. JS常用校验方法（判断输入框是否为空，数字，电话，邮件，四舍五入等）

    JS常用校验方法: 1.判断输入框是否为空,为空时弹出提示框 2.关闭窗口 3.检查输入字符串是否为数字 4.强制把大写转换成小写 5.手机号码校验,长度为11位数字. 6.电子邮件校验 7.电话号码 ...

随机推荐

  1. LoadRunner回放脚本时，显示浏览器的设置

    打开LoadRunner的VuGen,选择Tools-->General Options-->Display,在Display里将 Show browser during replay打钩 ...

  2. 201706 Ruby 基础 & 元编程

    yield yield self Proc yield带参数 rails中:yield 和 content_for methods.proc.lambda.block 闭包(用proc延长变量的生命周 ...

  3. win10提示防火墙没有法更改某些设置的处理办法

    一.问题发现 远程链接电脑时间发现远程链接失败 提问在“控制面板” 中打开“程序” 列表中启用“windows 防火墙” . 按照提示启用防火墙 ,发现启用或关闭页面不可编辑 二.原因是防火墙Wind ...

  4. 05.swoole学习笔记--定时器

    <?php //循环执行的定时器 swoole_timer_tick(,function($timer_id){ echo "执行 $timer_id \n"; }); sw ...

  5. stl_map复习

    set和map的底层模板是红黑树,可以有不同的键值和实值,关于增删改查,迭代器的使用都在代码里面,亲手尝试更方便记忆 #include <iostream>#include <map ...

  6. Java生鲜电商平台-优惠券系统设计详解

    Java生鲜电商平台-优惠券系统设计详解 优惠券作为电商最常用的营销手段,对于商家而言可以起到拉新.促活.提高转化的作用,对用户而言也可以获得实惠,今天就来谈谈优惠券系统的设计逻辑. 我对于优惠券系统 ...

  7. 7.8 Varnish Log

  8. 在 .net 中释放嵌入的资源

        private static void ExtractResourceToFile(string resourceName, string filename) {     if (!Syste ...

  9. Java 类加载器(ClassLoader)

    类加载器 ClassLoader 什么是类加载器? 通过一个类的全限定名来获取描述此类的二进制字节流这个动作放到Java虚拟机外部去实现, 以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代 ...

  10. face_recognition人脸识别

    对亚洲人识别准确度有点差,具体安装移步:https://www.cnblogs.com/ckAng/p/10981025.html 更多操作移步:https://github.com/ageitgey ...