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

有个表单,简单点.

<!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. Excel 2010 统计行数
			
    1. 首先选择一个空行 2.然后点击如下:公式 --- 3. 第一行:填写“103”,当然我也不能明白为啥填写103.照做就是了. 4.鼠标定位到 第二行 “Ref1”位置,然后 鼠标+shfit 按 ...
    
			
    2. 
						
  2. 网页头部的声明应该是用 lang="";
			
    我们经常需要用缩写的代码来表示一种语言,比如用en表示英语,用de表示德语.ISO 639就是规定语种代码的国际标准.最早的时候,ISO 639规定的代码是,用两个拉丁字母表示一种语言,这被称为ISO ...
    
			
    3. 
						
  3. Android TextView文字透明度和背景透明度设置
			
    textview1.setTextColor(Color.argb(255, 0, 255, 0)); //文字透明度 控件设为半透明: 控件名.getBackground().setAlpha(in ...
    
			
    4. 
						
  4. matplotlib 散点图scatter
			
    最近开始学习python编程,遇到scatter函数,感觉里面的参数不知道什么意思于是查资料,最后总结如下: 1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如 ...
    
			
    5. 
						
  5. 170530、java 迭代hashmap常用的三种方法
			
    @SuppressWarnings("rawtypes") public class HashMapDemo { //hashMap遍历 public static void ma ...
    
			
    6. 
						
  6. ZOJ 3203 Light Bulb
			
    Compared to wildleopard's wealthiness, his brother mildleopard is rather poor. His house is narrow a ...
    
			
    7. 
						
  7. Java学习记录－Lambda表达式示例
			
    List<Integer> userIds=userInfoList.stream().map(m->m.getUserId()).collect(Collectors.toList ...
    
			
    8. 
						
  8. square-and-multiply algorithm
			
    https://en.wikipedia.org/wiki/Square-and-multiply_algorithm
    
			
    9. 
						
  9. CF593C Beautiful Function 构造
			
    正解:构造 解题报告: 传送门! 我知道我咕了好几篇博客似乎,,,但我不听!我就是要发新博客QAQ!(理不直气也壮 这题,想明白了还是比较简单的QwQ实现起来似乎也没有很复杂QAQ 首先思考一下,显然 ...
    
			
    10. 
						
  10. 【剑指Offer】俯视50题之1-10题
			
    面试题1赋值运算符函数  面试题2 实现Singleton模式  面试题3 二维数组中的查找   面试题4 替换空格   面试题5 从头到尾打印链表   面试题6 重建二叉树   面试题7 用两个栈实 ...
    
			
    11.