最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区".

有个表单,简单点.

<!DOCTYPE html>

<!-- 注册表单验证,用户名格式(未加入Ajax)密码两次相同,则可提交 -->

<html>

<head>

<meta charset="UTF-8">

<!-- 实现form表单验证及跳转action -->

<title>JS2_form表单验证</title>

</head>

<body>

    <p>注册</p>

    <form action="http://www.ykmimi.com" name="formReg"

        onsubmit="return submitFunc()" method="post">

        <!--   [错误方式->]onchange="unameChange()"-->

        <!-- 传参this.value -->

        用户名:<input type="text" name="username" id="username"

            onfocus="unameFocus(this.value)" onblur="unameBlur(this.value)" /><span id="unameTag"></span>

        <br />

        <!-- onfocus="upass1Focus()" -->

        密码:<input type="password" name="password" id="password" onfocus="upass1Focus()"

            onblur="testPassword()" /><span id="upass1Tag"></span> <br />

        <!-- onfocus="upass2Focus()" -->

        重复密码:<input type="password" name="password2" id="password2" onfocus="upass2Focus()"

            onblur="testPassword()" />

        <!-- onchange="upass2Blur()" -->

        <span id="upass2Tag"></span> <br />

        <!-- 年龄:<input type="text" name="age" id="age" onfocus="uageFocus()" onblur="uageBlur()" /><span id="uageTag"></span> <br/> -->

        <input type="submit" value="提交" />

    </form>

<hr>

<br>

待完善: <br>

1.bootstrap框架引入. <br>

2.后台判定. <br>

3.Ajax判定用户名是否存在. <br>

4.

</body>

<!-- 引入外部js,判定注册账户账户信息 -->

<script type="text/javascript" src="scripts/reg2.js">

</script>

</html>

然后这个reg2.js

:

/**

 *  用户注册界面JS

 */

// ///*[[用户名的焦点和失焦方法]]

// 验证用户名格式长度.等,Focus时

function unameFocus() {

    // 获取id为username中的数据值

    var unameObj = document.querySelector("#username");

    // 获取具体值

    var uname = unameObj.value;

    if (uname.length == 0 || uname=="") {

        document.querySelector("#unameTag").innerHTML = "请输入用户名,长度不小于3位.";

        return false;

    }

}

// 验证用户名格式长度,等, Blur时

function unameBlur() {

    // 获取document对象

    var unameObj = document.querySelector("#username");

    var upass1Obj = document.querySelector("#password");

    var upass1Tag = document.querySelector("#upass1Tag");

    var upass2Obj = document.querySelector("#password2");

    var upass2Tag = document.querySelector("#upass2Tag");

    // 获取具体值

    var uname = unameObj.value;

    var unameTag = document.querySelector("#unameTag");

    if (uname.length == 0 || uname=="" || uname.length < 3) {

        unameTag.innerHTML = "请输入用户名,长度不小于3位.";

        upass1Tag.innerHTML = "";

        upass2Tag.innerHTML = "";

        upass1Obj.value = "";

        upass2Obj.value = "";

        return false;

    } else {

        unameTag.innerHTML = "用户名可用.";

        return true;

    }

}

// ///*[[用户密码的判定 重复密码是否相同,长短等]]

// 用户密码1 Focus时

function upass1Focus() {

    // 获取document对象

    var upass1Obj = document.querySelector("#password");

    var upass1Tag = document.querySelector("#upass1Tag");

    // 获取具体值 (第一种方式)

    // var upass1 = upass1Obj.value;

    // 另一种获取value的方式: √

    var upass1 = document.formReg.password.value;

    // 判定是否满足密码的格式条件

    if (upass1.length == 0 || upass1=="") {

        upass1Tag.innerHTML = "输入密码,密码长度不小于6位,两次密码需输入一致,且不能有非法字符如%,*,#";

        return false;

    }

}

// 用户密码1 Blur时

function upass1Blur() {

    // 获取document对象

    var upass1Obj = document.querySelector("#password");

    var upass1Tag = document.querySelector("#upass1Tag");

    // 获取具体值

    var upass1 = upass1Obj.value;

    // 判定是否满足密码的格式条件

    if (upass1.length == 0 ||  upass1==""  || upass1.length < 6) {

        upass1Tag.innerHTML = "输入密码,密码长度不小于6位.谢谢合作												


											
JS判定注册表单的几个方式 及 Ajax进行用户名存在判定的更多相关文章
	

    
								
  1. 模拟js中注册表单验证
		
    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
    
		
    2. 
						
  2. 使用JS完成注册表单的数据校验
		
    1.前台校验 防君子不防小人 JavaScript被设计用来向HTML页面添加交互行为 JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言) JavaScript由数行可执行计算机代码 ...
    
		
    3. 
						
  3. 4.前端注册表单验证 && 表单回填
		
    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...
    
		
    4. 
						
  4. 表单验证—js循环所有表单验证
		
    [封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...
    
		
    5. 
						
  5. 一款基于jQuery的带Tooltip表单验证的注册表单
		
    今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
    
		
    6. 
						
  6. 第一百六十节，封装库--JavaScript，ajax注册表单到数据库
		
    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
    
		
    7. 
						
  7. ajax 提交 注册表单 到MySQL数据库
		
    今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...
    
		
    8. 
						
  8. 第一百八十四节，jQuery-UI，验证注册表单
		
    jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...
    
		
    9. 
						
  9. CSS3制作分步注册表单
		
    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 如何在office2010中的EXCEL表格使用求和公式
			
    EXCEL做表格非常方便,有时我们需要对表格中的很多数字进行求和计算,如果用计算器算会非常麻烦,别担心,用求和公式计算,非常简单的 工具/原料   电脑一台 offic2010软件一套 方法/步骤   ...
    
			
    2. 
						
  2. CodeForces - 459E Pashmak and Graph[贪心优化dp]
			
    E. Pashmak and Graph time limit per test 1 second memory limit per test 256 megabytes input standard ...
    
			
    3. 
						
  3. python 进行抓包嗅探
			
    一.绪论 最近一直想弄一个代理,并且对数据包进行解读,从而完成来往流量的嗅探.于是今天学习了一下如何使用Python抓包并进行解包. 首先要用到两个模块 dpkt(我这边ubuntu16.04 LTS ...
    
			
    4. 
						
  4. Ubuntu16.04安装Nessus和MSF
			
    一.Nessus篇: 1.参考文献:https://www.cnblogs.com/shamojituan/p/6511208.html 2.下载地址:https://downloads.nessus ...
    
			
    5. 
						
  5. nodejs 事件EventEmitter
			
    index.js: // 引入 events 模块 var events = require('events'); //处理函数要写在调用前 var eventHandler = function() ...
    
			
    6. 
						
  6. Android动态加载ListView中的Item
			
    我这周上网看到动态增加listview的每一项item的布局,今天抽空自己写了一个,方便自己日后使用,这个效果还是很不错的,用到了Adapter的notifyDataSetChanged()方法,当点 ...
    
			
    7. 
						
  7. python range函数与numpy arange函数
			
    1.range()返回的是range object,而np.arange()返回的是numpy.ndarray() range尽可用于迭代,而np.arange作用远不止于此,它是一个序列,可被当做向 ...
    
			
    8. 
						
  8. react 侧栏二级菜单组件
			
    侧边栏菜单组件 component 下新建menu文件,menu下建index.jsx和subitem.jsx index.jsx import React, { Component } from ' ...
    
			
    9. 
						
  9. Oracle数据库PL/SQL Developer查询结果显示问号乱码的解决方法
			
    PL SQL Developer,查询结果中的中文变成了一堆问号,SQL语句中的中文被提示invalid character,不能识别. 解决方法: 执行,select userenv('langua ...
    
			
    10. 
						
  10. Servlet + JSP 时代
			
    Spring,Django,Rails,Express这些框架技术的出现都是为了解决什么问题,现在这些框架都应用在哪些方面? - 知乎 https://www.zhihu.com/question/2 ...
    
			
    11.