示例1

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>注册表单验证</title>

     <style>

         #div1 {

             margin: 50px auto;

             width: 250px;

             height: 300px;

             background: cyan;

             text-align: center;

             padding: 50px;

         }

         #div1 input {

             width: 250px;

             height: 30px;

             margin: 20px 0;

             text-indent: 10px;

         }

         #div1 span {

             color: red;

         }

     </style>

     <script>

         window.onload = function(){

             var oUsername = document.getElementById('username');//获得文档节点

             var oUsernameSpan = document.getElementById('username_span');//获得文档节点

             oUsername.onblur = function(){

                 var oValue = oUsername.value.replace(/ /g, '');

                 oUsername.value = oValue;

                 if(!oValue){

                     oUsernameSpan.innerHTML = '用户名不能为空';

                 }else if(oValue.length < 6 || oValue.length > 18){

                     oUsernameSpan.innerHTML = '长度应为6~18个字符';

                 }else if(oValue[0] >= '0' && oValue[0] <= '9'){

                     oUsernameSpan.innerHTML = '邮件地址必需以英文字母开头';

                 }else if(!(isAbc(oValue))){

                     oUsernameSpan.innerHTML = '邮件地址需由字母、数字或下划线组成';

                 }else{

                     oUsernameSpan.innerHTML = '输入正确';

                 }

             }

         }

         //判断字符串是否都是字母数字下划线组成,

         function isAbc(str){

             var res = true;

             for(var i = 0; i < str.length; i++){

                 if(!(str[i] >= '0' && str[i] <= '9' || str[i] >= 'a' && str[i] <= 'z' ||str[i] >= 'A' && str[i] <= 'Z' || str[i] =='_')){

                     res = false;

                 }

             }

             return res;

         }

     </script>

 </head>

 <body>

     <div id="div1">

         <input type="text" id="username" placeholder="请输入用户名"><br>

         <span id="username_span">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>

         <input type="text" id="password" placeholder="请输入密码">

     </div>

 </body>

 </html>

效果：

示例2（小变动）

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

         <style>

             #div1{width: 300px; height: 300px; border: 1px solid black; background-color: cyan; padding: 50px; text-align: center; margin: 100px auto;}

             #div1 input{width: 298px; height: 30px; font-size: 18px;margin-bottom: 10px; margin-top: 20px}

             #div1 span{color: red}

         </style>

         <script>

             window.onload = function(){

                 var oUsername = document.getElementById('username');

                 var oUsernameSpan = document.getElementById("username_span");

                 //失去焦点的时候判断

                 oUsername.onblur = function(){

                     //1、如果我们在输入的时候，不小心输入了空格，将空格祛除掉

                     var oValue = oUsername.value.replace(/ /ig, "");

                     oUsername.value = oValue;

                     //2、如何对用户名进行验证

                     if(!oValue){

                         oUsernameSpan.innerHTML = '用户名不能为空';

                     }else if(oValue.length > 18 || oValue.length < 6){

                         oUsernameSpan.innerHTML = "长度应为6~18个字符";

                     }else if(oValue[0] >= "0" && oValue[0] <= "9"){

                         oUsernameSpan.innerHTML = "邮件地址必需以英文字母开头";

                     }else{

                         //判断每一个字符都符合要求

                         var isYes = true; //假设用户名是正确的

                         for(var i = 0; i < oValue.length; i++){

                             if(!isABC(oValue[i])){

                                 isYes = false;

                                 break;

                             }

                         }

                         if(isYes){

                             oUsernameSpan.innerHTML = "输入正确✅";

                         }else{

                             oUsernameSpan.innerHTML = '邮件地址需由字母、数字或下划线组成';

                         }

                     }

                 }

             }

             //判断一个字符是否是数字、字母、下划线

             function isABC(charStr){

                 if(charStr >= "A" && charStr <= "Z" || charStr >= "a" && charStr <= "z" || charStr >= "0" && charStr <= "9" || charStr == "_"){

                     return true;

                 }else{

                     return false;

                 }

             }

         </script>

     </head>

     <body>

         <div id = 'div1'>

             <input type="text" placeholder="请输入用户名" id = 'username'><br/>

             <span id = 'username_span'>6~18个字符，可使用字母、数字、下划线，需以字母开头</span><br/>

             <input type="password" placeholder="请输入密码">

         </div>

     </body>

 </html>

效果同上。

模拟js中注册表单验证的更多相关文章

  1. JS中的表单验证+正则表达式

    表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...

  2. JS判定注册表单的几个方式 及 Ajax进行用户名存在判定

    最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...

  3. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  4. angular中的表单验证

    angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...

  5. js/jquery/插件表单验证

    媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...

  6. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  7. 2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

  9. js函数、表单验证

    惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!! [笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看 ...

随机推荐

  1. JAVA记录-生成jar包方法

    方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFEST.MF”, Manifest-Version: 1.0 Class-Path: lib/commons-cod ...

  2. 使用ajax实现form表单的submit事件

    需求:如题,需要在登录页面使用ajax提交请求,并在本页面返回请求信息. 主要部分jS如下: //提交表单$("#loginForm").submit(function(){ va ...

  3. xshell访问Ubuntu16.04显示乱码(即使在xshell设置了utf8)解决方案

    一开始问题是:(无法显示,也无法输入) 然后使用: locale -a 查看服务器安装的全部编码: (且服务器使用的 LANG=C) 只要用: 即可显示中文.也可以输入中文.

  4. 转 -- pydoc用法

    原文地址: https://www.cnblogs.com/meitian/p/6704488.html pydoc用法 pydoc是python自带的一个文档生成工具,使用pydoc可以很方便的查看 ...

  5. 啊金学习javascript系列一之javascript整体印象

    javascript是一门编程语言,这个是第一个观点.是编程语言,那就拥有编程语言的功能.在我理解之中,编程语言是和计算机打交道的语言,就是我们跟计算机说话用的语言,是用来指挥计算机的.人类能够理解语 ...

  6. Android BroadcastReceiver 面试解析

  7. 【逆向工具】使用x64dbg+spy去除WinRAR5.40(64位)广告弹框

    1 学习目标 WinRAR5.40(64位)的弹框广告去除,由于我的系统为x64版本,所以安装了WinRAR(x64)版本. OD无法调试64位的程序,可以让我熟悉x64dbg进行调试的界面. 其次是 ...

  8. NMS和soft-nms算法

    非极大值抑制算法(nms) 1. 算法原理 非极大值抑制算法(Non-maximum suppression, NMS)的本质是搜索局部极大值,抑制非极大值元素. 2. 3邻域情况下NMS的实现 3邻 ...

  9. SIFT feature

    转载:http://www.cnblogs.com/wangguchangqing/p/4853263.html 1.SIFT概述 SIFT的全称是Scale Invariant Feature Tr ...

  10. GPIO接口解析【转】

    本文提供了一个linux下访问GPIO的约定的概述. 这些调用使用gpio_* 命名前缀.没有别的调用会使用这个前缀或是相关的__gpio_*前缀. 转自:http://blog.163.com/w5 ...