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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
随机推荐
- 顶级测试框架Jest指南：跑通一个完美的程序，就是教出一群像样的学生
facebook三大项目:yarn jest metro,有横扫宇宙之势. 而jest项目的宗旨为:减少测试一个项目所花费的时间成本和认知成本. --其实,它在让你当一个好老师. jest文档非常简略 ...
- 打印begin~end
要求: 输入:begin和end 输出:依次打印出begin到end import java.util.Scanner; //递归打印begin —— end public class demo1 { ...
- php中array_slice和array_splice函数解析方式方法
array_slice array array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_k ...
- scorllview嵌套gridview和listview的兼容问题
ScrollView嵌套GridView或ListView,由于这两款控件都自带滚动条,当他们碰到一起的时候便会出问题,即GridView会显示不全. 解决办法:自定义一个GridView控件 pac ...
- Nginx - 01 - Nginx初体验
首先下载Nginx,这里电脑太垃圾,没法装虚拟机,所以只能用Windons版本的Nginx. 安装包下载地址:http://nginx.org/en/download.html 下载下来,然后解压: ...
- css面试题总结（转）
转自此网页http://www.cnblogs.com/YangqinCao/p/5721810.html. 1.两栏布局,左边栏宽度固定,适应父元素高度变化 首先分析两栏布局, 两栏布局两种常见方法 ...
- <> 是不等号的意思
<> 是不等号的意思,也有的语言可以写作:# 或者 != 1.=表示 等于: 2.<> 表示不等于:(注释:在 SQL 的一些版本中,该操作符可被写成 !=): 3.> ...
- BZOJ 4034 洛谷3178 树上操作题解
一个很裸的树链剖分模板.注意一下数据范围,有的地方要开longlong,这就是唯一的陷阱了. # include<iostream> # include<cstdio> # i ...
- hdu 1561【树形dp+01背包】
http://acm.hdu.edu.cn/showproblem.php?pid=1561 很容易想到如果是要攻克v城需要先攻克u城的话,可以建u到v的边.但是如果能够直接攻克u城呢?无边可建,这样 ...
- HDU 5584 LCM Walk【搜索】
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5584 题意: 分析: 这题比赛的时候卡了很久,一直在用数论的方法解决. 其实从终点往前推就可以发现, ...