结构：

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. 1-5SpringBoot操作之Spring-Data-Jpa（二）CRUD实现

    本帖来演示下SpringBoot下,实用Spring-Data-Jpa来实现CRUD操作,视图层采用Freemarker 这里我们先把application.properties修改成applicat ...

  2. SciPy 图像处理

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  3. UITree_study

    1.Create canvas 2.Add TreeView 3.Subscribe and unsubscribe events(订阅和取消订阅事件) 4.Data bind items it's ...

  4. docker 为镜像添加ssh服务-使用Dockerfile 创建

    首先,基于要添加内容的镜像ubuntu:18.04运行一个容器, 在宿主机(下面步骤是在容器中创建的,应该在宿主机创建进行以下步骤) 一.创建一个工作目录 二.创建Dockerfile 和脚本run. ...

  5. Fiddler抓取HTTP请求。

    参考链接:http://blog.csdn.net/ohmygirl/article/details/17849983/ http://www.cnblogs.com/kingwolf_JavaScr ...

  6. （最详细）JAVA如何连接虚拟机的HBASE和hadoop（JAVA如何远程访问虚拟机HBASE）

    第一步: 首先把虚拟机和你的主机(本地电脑)弄通这样本地机器才能访问虚拟机里面的内容 我用的虚拟机为 VMware Workstation linux 为 centeros 补充一点虚拟机设置 1  ...

  7. 前端学习(22)~css问题讲解

    你是如何理解 HTML 语义化的? 语义化:指对文本内容的结构化(内容语义化),选择合乎语义的标签(代码语义化). 举例:段落用 p,边栏用 aside,主要内容用 main 标签. 好处: 便于开发 ...

  8. Robot set variable if

    ${strid} Set Variable If '${row}' =='2' LFFD_TANK_RAMP ... '${row}' =='3' LFFD_TANK_LANDING

  9. scanf与正则表达式的搭配及应用

    scanf与正则表达式的搭配及应用 正则其实我也学的不咋地,只会一点皮毛,正则最大的作用就是当输入流是一个字符串,我们能在输入的时候就滤掉无用信息,省去后期提取数值的步骤. 正则的语法我怕误人子弟,嘿 ...

  10. 关于如何实现一个Saga分布式事务框架的思考

    关于Saga模式的介绍,已经有一篇文章介绍的很清楚了,链接在这里:分布式事务:Saga模式. 关于TCC模式的介绍,也已经有一篇文章介绍的很清楚了,链接在这里:关于如何实现一个TCC分布式事务框架的一 ...