js(一) 三大事件 实现注册验证
ps：小声比比，为什么一周多没更，因为js真的好难啊。 上一周做了一整周的jsp+sevlet+mysql做了一个MVC模式的最基本的新闻系统源码会有空搞出来的 好累 好多的。
三大事件
（鼠标事件、键盘事件、html事件）
鼠标事件
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
键盘事件
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<script>
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束，字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
</script>
HTML事件
<body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
<script>
window.onload = function () {
console.log("文档加载完毕！");
};
/*window.onunload = function () {
alert("文档被关闭！");
};*/
/*打印选中的文本*/
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*内容被改变时*/
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*得到光标*/
function myFocus() {
console.log("得到光标！");
}
/*窗口尺寸变化*/
window.onresize = function () {
console.log("窗口变化！")
};
/*滚动条移动*/
window.onscroll = function () {
console.log("滚动");
}
</script>
注册实现（关联正则表达式）：
function validateUsername() {
//通过ID获取页面中输入的username
var va = document.getElementById("username").value;
//自己赋值的正则表达式
var judge = /^[a-zA-Z0-9]{6,12}$/;
//判断是否符合
if (!judge.test(va)) {
//不符合就在行后输出一个错误提示；
//利用innerHtml改变页面中userNameError内的值
document.getElementById("userNameError").innerHTML = "请输入正确的账号";
//更改样式
userNameError.style.border = "1px red soild";
} else {
//正确则不需要填值，所以设置为空就行
document.getElementById("userNameError").innerHTML = "";
userNameError.style.border = "";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function validateUsername() {
var va = document.getElementById("username").value;
var judge = /^[a-zA-Z0-9]{6,12}$/;
if (!judge.test(va)) {
document.getElementById("userNameError").innerHTML = "请输入正确的账号";
userNameError.style.border = "1px red soild";
} else {
document.getElementById("userNameError").innerHTML = "";
userNameError.style.border = "";
}
} function validatePassword() {
var va = document.getElementById("pwd1").value;
var judge = /^[a-zA-Z0-9]{6,12}$/;
if (!judge.test(va)) {
document.getElementById("passwordError").innerHTML = "请输入正确的密码";
passwordError.style.border = "1px red soild";
} else {
document.getElementById("passwordError").innerHTML = "";
passwordError.style.border = "";
}
} function validatePwd() {
var pwd1 = document.getElementById("pwd1").value;
var pwd2 = document.getElementById("pwd2").value;
if (pwd1 != pwd2) {
document.getElementById("pwdError").innerHTML = "两次密码不一致";
pwdError.style.border = "1px red soild";
} else {
document.getElementById("pwdError").innerHTML = "";
pwdError.style.border = "";
}
}
function validate() {
var isError=false;
var va = document.getElementById("username").value;
var pwd1 = document.getElementById("pwd1").value;
var pwd2 = document.getElementById("pwd2").value;
var judge = /[a-zA-Z0-9]{6,12}/;
if (!judge.test(va)) {
document.getElementById("userNameError").innerHTML = "请输入正确的账号";
userNameError.style.border = "1px red soild";
isError=true;
} else {
document.getElementById("userNameError").innerHTML = "";
userNameError.style.border = "";
}
if (!judge.test(pwd1)) {
document.getElementById("passwordError").innerHTML = "请输入正确的密码";
passwordError.style.border = "1px red soild";
isError=true;
} else {
document.getElementById("passwordError").innerHTML = "";
passwordError.style.border = "";
}
if (pwd1 != pwd2) {
document.getElementById("pwdError").innerHTML = "两次密码不一致";
pwdError.style.border = "1px red soild";
isError=true;
} else {
document.getElementById("pwdError").innerHTML = "";
pwdError.style.border = "";
} if (isError) {
return false;
}
} </script>
<body>
<form onsubmit="return validate()">
<table>
<tr>
<td>账号:</td>
<td><input type="text" name="username" id="username" placeholder="请设置账号6-12位" onblur="validateUsername()"/></td>
<td>
<select name="select" id="select">
<option value="0">163.com</option>
<option value="1">qq.com</option>
<option value="2">126.com</option>
</select>
<span id="userNameError" style="color:red;"></span>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd1" id="pwd1" placeholder="请设置登录密码6-12位" onblur="validatePassword()"/></td>
<td><span id="passwordError" style="color:red;"></span></td>
</tr>
<tr>
<td>再次输入:</td>
<td><input type="password" name="pwd2" id="pwd2" onblur="validatePwd()"/></td>
<td><span id="pwdError" style="color:red;"></span></td>
</tr>
</table>
<input type="submit"></input>
</form>
</body>
</html>
js 的RegExp的三个方法：
1. test() 方法
test() 方法用来检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回 true ，否则返回 false。
语法：
RegExpObject.test(string) //必需参数。要检测的字符串。
2. exec() 方法
exec() 方法用来检索字符串中与正则表达式匹配的值。
exec() 方法返回一个数组，其中存放匹配的结果。如果未找到匹配的值，则返回 null。
语法：
RegExpObject.exec(string)//必需参数。要检索的字符串。
与 test() 方法相比，exec() 方法更加强大，功能也更加复杂。
当 exec() 找到了匹配的文本时，会返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。
除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。
但是，当 RegExpObject 是一个全局正则表达式（带有 g 修饰符）时，exec() 的行为就稍微复杂一些，它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。
也就是说，可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
var str = "Itxueyuan's domain is www.itxueyuan.org. Welcome to itxueyuan !";
var pattern = new RegExp("itxueyuan", "ig");
var i=1;
var result;
while(result=pattern.exec(str)){
alert(
"第 "+i+" 次匹配的字符串："+result[0]+"\n"+
"所匹配的字符的起始位置："+result.index+"\n"+
"第 "+(++i)+" 次匹配的的起始位置："+pattern.lastIndex
);
}
3.compile() 方法
compile() 方法可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。
语法：
RegExpObject.compile(regexp,modifier)
参数说明：
regexp //正则表达式;
modifier //规定匹配的类型。"g" 用于全局匹配，"i" 用于区分大小写，"gi" 用于全局区分大小写的匹配。
例如，在字符串中全局搜索 “man”，并用 “person” 替换。然后通过 compile() 方法，改变正则表达式，用 “person” 替换 “man” 或 “woman”，：
var str="Every man in the world! Every woman on earth!";
patt=/man/g;
str2=str.replace(patt,"person");
document.write(str2+"<br />"); patt=/(wo)?man/g;
patt.compile(patt);
str2=str.replace(patt,"person");
document.write(str2);
jQuery 取选中的radio的值方法
var val=$(‘input:radio[name=“sex”]:checked’).val();
附三种方法都可以：
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
js(一) 三大事件 实现注册验证的更多相关文章
- PHP+Ajax 异步通讯注册验证
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...
- HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- JS鼠标滑轮事件的写法和按键的事件
在body注册一下滑轮事件 <body onload="win_onload();"></body> 然后JS代码如下: function win_onlo ...
- js阻止冒泡事件及默认操作
1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对 ...
- 关于js中的事件
这是第一篇技术性博客. 因为最近做的web版前端求职简历算是告一段落了(点此看简历).(稍微记录下吧:自从确定简历的简笔画风格后(因为刚开始设想的蓝天白云大树啥的不仅图片特难找而且做着做着就觉得有点俗 ...
- JS学习之事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
随机推荐
- WPF DrawingVisual详解
在WPF中,如果需要绘制大量图形元素,并且对性能要求严苛的话,最好使用DrawingVisual,当然,你也可以选用 Path类和比Path类更轻量级的Geometry(几何形状)来实现你的需求,但是 ...
- css中background背景属性概述
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
- saltstack+python批量修改服务器密码
saltstack安装:略过 python脚本修改密码: # -*- coding utf-8 -*- import socket import re import os import sys imp ...
- CodePlus2017 12月月赛 div2可做题2
11月的月赛错过了,来打12月月赛,由于很(zi)想(ji)拿(tai)衣(ruo)服(la),所以去打div2. T1是一个sb模拟,但是机房全卡死在这道语文题上了,基本上弄了一个半小时,T2可以秒 ...
- Ceph 之Multisite 下的bucket reshard
目录 一.背景和问题 二.bucket reshard 过程 主集群信息汇总 Multisite 下手动reshard References 一.背景和问题 默认情况下只有当单个bucket承载的ob ...
- 显示调用dll
原dll中导出的接口如图: Head.h: struct zint_render_line { float x, y, length, width; struct zint_render_line * ...
- 笔记：OSAL st 宏学习 do { x } while (__LINE__ == -1)
笔记:OSAL st 宏学习 do { x } while (LINE == -1) #define st(x) do { x } while (__LINE__ == -1) 这段的意思是让代码可以 ...
- ESP8266 支持浮点运算吗？
ESP8266 支持浮点运算吗? 可以说支持,也可以说不支持. 说不支持的原因是因为 ESP8266 内部没有 FPU,无法使用硬件计算. 说支持的意思是可以使用软件进行浮点运算,但是会很慢很慢,如果 ...
- [ 浙江大学 数据库系统原理 ] [ MiniSQL ]课程设计
工作流程图如下.代码详见https://github.com/gstggsstt/minisql. 注:课程设计时间紧迫,编码基本没有性能考虑,仅限于实现功能,索引未使用B+tree.
- 解决 win10 pycurl安装出错 Command "python setup.py egg_info" failed with error code 10 编译安装包 安装万金油
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/yexiaohhjk/article/de ...