结构：

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. git/github使用详解

    介绍:gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. 2018年6月4日,微软宣布,通过75亿美元的股票交易收购代码托管平台Gi ...

  2. elk基本配置

    https://www.cnblogs.com/zsl-find/articles/10730458.html https://www.cnblogs.com/mylovelulu/p/1053000 ...

  3. Kubernetes 集群日志管理【转】

    Kubernetes 开发了一个 Elasticsearch 附加组件来实现集群的日志管理.这是一个 Elasticsearch.Fluentd 和 Kibana 的组合.Elasticsearch ...

  4. 201705 Ruby基础拾遗

    Mixin override 异常处理 super 与super() 使用%()处理需要string interpolation但同时也需要" "(double quote)的状况 ...

  5. DB2的简单操作

    转 最近在看db2,边读边写了一些,记下来,虽然写的乱七八糟.以备后用. 这些都写的很简单.我觉得也算是一些简单的操作吧,有些也是摘自别人的blog具体是引用哪的就不太记得了. 一.DB2两种注释写法 ...

  6. obtainFreshBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  7. Linux基础命令、软件安装

    常用命令 查看当前系统中存在哪些shell cat /etc/shells [root@** ~]# cat /etc/shells /bin/sh /bin/bash /usr/bin/sh /us ...

  8. Docker commit 命令

    docker commit :从容器创建一个新的镜像. 语法 docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] OPTIONS说明: -a :提 ...

  9. 0104 gradle入门

    背景 gradle的官网是 www.gradle.org,标题介绍是: accelerate developer productivity,翻译过来:提高开发者的生产率: 简要介绍:从手机app到微服 ...

  10. 留学生Essay写作清晰简洁8大原则

    英语Essay写作中国留学生需要掌握的一个技能,一篇文笔简洁优雅的Essay对于提高分数会有很大帮助.但目前的情况是,很多人并没有受过专门的学术Essay写作训练,在写Essay时经常会出现各种各样的 ...