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

有个表单,简单点.

<!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. webpack中，css中打包背景图，路径报错
			
    css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
    
			
    2. 
						
  2. 关于sencha touch 用phonegap打包后，docked悬停的组件被手机软键盘遮挡的解决方法
			
    这个问题应该算是phonegap的一个bug,在mainifest.xml 里android:windowSoftInputMode设置成了adjustpan,理论上不会出现遮挡悬停组件这种情况, 不 ...
    
			
    3. 
						
  3. js+jquery(二)
			
    1.获取列表框所选中的全部选项的值 $("select").change(function() { // 设置列表框change 事件 // 获取列表框所选中的全部选项的值 ale ...
    
			
    4. 
						
  4. scss语法
			
    SCSS其实就是SASS新语法, 增强了对CSS3语法的支持 1.变量(Variables) /*声明变明*/ $color: #333; $bgcolor:#f36; /*引用变量*/ body { ...
    
			
    5. 
						
  5. CentOS配置bond
			
    Bonding的模式一共有7种: #defineBOND_MODE_ROUNDROBIN       0   (balance-rr模式)网卡的负载均衡模式 #defineBOND_MODE_ACTI ...
    
			
    6. 
						
  6. 关于typecho,404页面错误
			
    之前用typecho,但是没发现404错误页面; 现在只要发布文章就提示404页面错误. 解决方法 点击发布日期,将发布日期的分向后拖动几分钟: 然后发布,发现404错误不见了: 我是遇到这种情况了不 ...
    
			
    7. 
						
  7. 170703、springboot编程之模板使用（thymeleaf、freemarker）
			
    官方不推荐集成jsp,关于使用jsp模板我这里就不赘述,如果有需要的,请自行百度! thymeleaf的使用 1.在pom中增加thymeleaf支持 <dependency> <g ...
    
			
    8. 
						
  8. PL/SQL编程基础（二）：变量的声明、赋值、（赋值、连接、关系、逻辑）运算符
			
    变量的声明.赋值.运算符 1.声明并使用变量 变量可以在声明时赋值,也可以先定义后赋值: 使用%TYPE与%ROWTYPE可以根据已有类型定义变量. PL/SQL是一种强类型的编程语言,所有的变量都必 ...
    
			
    9. 
						
  9. ora-28056错误解决
			
    问题描述:今天有同事找我,说是oracle数据库的监听器出现问题,我连接服务器查看后,发现不是监听器问题,而是进程连接数已经达到150个了,客户端连接不上服务器,因其是测试服务器,重启服务器后再次sq ...
    
			
    10. 
						
  10. python面向对象(类的成员及类方法)
			
    类的普通成员 字段 方法 属性 类的高级成员 静态字段 静态方法 属性方法   类方法 类成员修饰符 类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中, ...
    
			
    11.