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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
随机推荐
- WatchKit编程指南：概览--Watch应用的体系结构
Apple Watch应用程序包含两个部分:Watch应用和WatchKit应用扩展.Watch应用驻留在用户的Apple Watch中,只含有故事板和资源文件,要注意它并不包含任何代码.而Watch ...
- 【风马一族_php】
原文来自:http://www.cnblogs.com/sows/p/6054383.html (博客园的)风马一族 侵犯版本,后果自负 2016-11-11 15:13:51 回顾 数组:分配 ...
- LeetCode Top 100 Liked Questions in Golang(updating...)
leetcode go语言版本,主要为了熟悉下语言 1. Two Sum 双指针版本, O(NlogN) func twoSum(nums []int, target int) []int { val ...
- 【JZOJ4898】【NOIP2016提高A组集训第17场11.16】人生的价值
题目描述 NiroBC终于找到了人生的意义,可是她已经老了,在新世界,没有人认识她,她孤独地在病榻上回顾着自己平凡的一生,老泪纵横.NiroBC多么渴望再多活一会儿啊! 突然一个戴着黑色方框眼镜,方脸 ...
- WPF/Silverlight深度解决方案：(九)HLSL自定义渲染特效之完美攻略(下)
原文:WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下) 本想只用两节来完成关于HLSL自定义渲染相关知识的讲解,鉴于最近非常的多的朋友对此相当感兴趣,想知道最多 ...
- jdbc框架-dbutils的简单使用
jdbc框架-dbutils的简单使用 dbutils:是apache组织的一个工具类,jdbc的框架,更方便我们使用 使用步骤: 1.导入jar包(commons-dbutils-1.4.jar) ...
- docker 与host互传文件
docker 的cp命令可以从容器往外复制,也可以从本机复制的容器. docker cp 文件路径 容器id:/容器目录 docker help cp Usage: docker cp [OPT ...
- scrapy 调用js
依赖: PyExecJS 使用案例: from execjs import execjs text = response.xpath('//script/text()')[1].get() ctx = ...
- 【NS2】trace 文件格式（转载）
本文档是对 http://nsnam.isi.edu/nsnam/index.php/NS-2_Trace_Formats > 的翻译. 译注:本文描述的无线格Trace格式已经有些陈旧,现在一 ...
- Python基础：25文件
一:文件对象 文件对象不仅可以用来访问普通的磁盘文件, 而且也可以访问任何其它类型抽象层面上的"文件". 一旦设置了合适的"钩子", 你就可以访问具有文件类型接 ...