结构：

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. 【Unity】鼠标划定范围然后截图~

    有时候要重复用某一个场景的某一个角度,都过去好几步了结果总不能再把已经打乱的场景物体再移动回去吧.so~智慧的我完成了伟大的偷懒.截图保存,什么时候要看,直接上图片以假乱真棒棒哒~ 当然这个功能还能用 ...

  2. linux(centos6.9)下使用yum安装mysql，及启动MySQL等

    查看系统自带的mysql版本:rpm -qa | grep mysql 卸载mysql:rpm -e mysql-libs-5.1.73-8.el6_8.x86_64 --nodeps 1. 安装my ...

  3. app1----攻防世界

    啥也不说把题目下载下来,在模拟器里运行一下 输入正确的key就是flag 继续下一步分析,可以使用Androidkiller分析,我喜欢使用jeb这里我就使用jeb进行分析 找到MainActivit ...

  4. Hexo搭建个人博客及next主题基本配置

    前言 国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...

  5. Kubernetes——命令行操作

    如果集群初始化失败需要的操作: master:  kubeadm reset   #回答y  执行一条它提示给你的iptables命令即可 node:  systemctl stop kubelet  ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-eject

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Golang的选择结构-if语句

    Golang的选择结构-if语句 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.选择语句应用场景概述 选择结构也称为条件判断,生活中关于判断的场景也非常的多,比如: ()登录Q ...

  9. POJ 2785：4 Values whose Sum is 0 二分

    4 Values whose Sum is 0 Time Limit: 15000MS   Memory Limit: 228000K Total Submissions: 18221   Accep ...

  10. 【LeetCode】重新安排行程

    [问题]给定一个机票的字符串二维数组 [from, to],子数组中的两个成员分别表示飞机出发和降落的机场地点,对该行程进行重新规划排序.所有这些机票都属于一个从JFK(肯尼迪国际机场)出发的先生,所 ...