结构：

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. javascript中，对象本身就是一种Map结构。

    var map = {}; map['key1'] = 1; map['key2@'] = 2;   console.log(map['key1']);//结果是1. console.log(map[ ...

  2. 判断ES数据是否更新成功

    参考:https://stackoverflow.com/questions/38928991/how-to-detect-if-a-document-update-in-elasticsearch- ...

  3. STM32学习笔记：IIC通信协议详解（附带软件模拟源码）

    什么是IIC(I2C)? IIC 即Inter-Integrated Circuit(集成电路总线),这种总线类型是由飞利浦半导体公司设计出来的一种简单.双向.二线制.同步串行总线.它是一种多向控制总 ...

  4. python编写banner获取的常用模块

    模块的概念:模块也叫库,每个模块中都内置了大量的功能和函数.类和变量.它就像是积木,可以根据需要进行调用组合.模块就是程序,每个模块就是一个后缀为.py的Python程序.Python的模块分为标准模 ...

  5. 51nod 1009：数字1的数量

    1009 数字1的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个 ...

  6. Docker基本使用运行ngix镜像

    docker pull 项目名 会从docker默认的仓库去拉去项目,如果是docker pull 项目名 地址 会从给定地址拉去镜像 docker run image名字  运行镜像 docker架 ...

  7. oracle 实现主键id自增

    公司现在项目数据库使用oracle,oracle实现表主键自增比mysql麻烦 mysql 在表主键auto_increment 打钩即可.oracle没有改属性,就相对麻烦.特此记录一下自增方法 测 ...

  8. Linux-Journal

    Linux-Journal 1. 日志简介 2. 日志的优先级和分类 2.1 优先级 2.2 设施分类 3. 命令帮助 4. 日志查看示例 5. 日志大小限制 6. 手动清理日志文件 1. 日志简介 ...

  9. ROS常用库（五）navigation之Tutorials

    一.TF 详见古月居 https://www.guyuehome.com/355 重点:广播TF,订阅,编译时Cmakelist添加编译选项 broadcaster.sendTransform( tf ...

  10. FORK（）函数

    一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个进程也可以做不同的 ...