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

有个表单,简单点.

<!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. 微信Android热补丁实践演进之路
			
    版权声明:本文由张绍文原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/81 来源:腾云阁 https://www.qclou ...
    
			
    2. 
						
  2. github(其他类似github)下载到本地配置
			
    首先是先装完插件,低版本的myeclipse要自己装插件, 如何使window->show view->other找到git 注意是选第二个... 然后next->next-> ...
    
			
    3. 
						
  3. 查看Oracle的redo日志切换频率
			
    1.Oracle log 每次切换会记录到告警日志中 设想写个方案来查看log切换频率来判断Oracle log是否应该更改大小. 2.sql a.查看redo日志信息 select * from v ...
    
			
    4. 
						
  4. OC开发_Storyboard——UITableView
			
    一.tableView 1.datasource数据源 (1 构造每一个tableVIewCell的方法:cellForRowAtIndexPath,这里的 dequeueReusableCellWi ...
    
			
    5. 
						
  5. POM(project Object Model) Maven包管理依赖 pom.xml文件
			
    什么是POM POM全称为“Project Object Model”,意思是工程对象模型.Maven工程使用pom.xml来指定工程配置信息,和其他文本信息.该配置文件以xml为格式,使用xml语法 ...
    
			
    6. 
						
  6. New动态分配  Delete 释放内存
			
    在C++中,对于变量和对象都是编译器在编译时分配好的,对于数组初始化时,无法确定多少内存,很容意造成大开小用的情况. new  动态分配 一般格式:1. 指针变量名 =new  类型标识符; 2.指针 ...
    
			
    7. 
						
  7. ar的主流算法
			
    基于无标志AR:代表作是PTAM/M,Mixare,将是AR未来的发展方向 跟踪技术可以大致分成两大类,一类是基于特征的跟踪(Feature Based Tracking),比如通过跟踪从输入图像中抽 ...
    
			
    8. 
						
  8. vue.js（一）
			
    之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...
    
			
    9. 
						
  9. Python开发【Django】：路由规则
			
    Django路由规则 1.基于正则的URL 在templates目录下创建index.html.detail.html文件 <!DOCTYPE html> <html lang=&q ...
    
			
    10. 
						
  10. spring Security 得到认证用户名的方法
			
    @Service("userService")public class UserServiceImpl implements UserService { @Overridepubl ...
    
			
    11.