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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
随机推荐
- tcpdump抓取udp报文
使用tcpdump命令抓取UDP 2000端口报文,并将报文保存到当前目录下的udp.cap文件,命令如下: tcpdump -i 网络接口名称 udp port 2000 -w ./udp.cap ...
- ie8 下margin-top失效的小案例
一个小案例,是关于IE8下的margin-top的失效问题,巨日代码如下: 正常的chrome浏览器下的显示如下: margin-top=10px,正常显示 但是在ie8下,最终样式如下: margi ...
- 两种方法使vue实现jQuery调用
引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...
- 【JZOJ4786】【NOIP2016提高A组模拟9.17】小a的强迫症
题目描述 输入 输出 样例输入 3 2 2 1 样例输出 3 数据范围 样例解释 解法 先假定每种颜色的珠子取一个按顺序排列. 设这n个珠子就是每一种颜色的珠子的最后一个. 考虑逐个把珠子放入. 对于 ...
- Android书架实现
转自http://blog.csdn.net/wangkuifeng0118/article/details/7944215 书架效果: 下面先看一下书架的实现原理吧! 首先看一下layout下的布局 ...
- 【python小随笔】List列表的常见函数与切片
eval()的使用 n = ["2.3","2.56"] m = [] for i in n: k = eval(i) #只是去了最外层的双引号,单引号, 规定 ...
- webpack配置vue项目
npm init 安装webpack,webpack-cli 新建src目录,在src目录下新建main.js
- docker search
命令:docker search [root@iZ943kh74qgZ ~]# docker search --help Usage: docker search [OPTIONS] TERM Sea ...
- seleium 滑动到底部
def scroll(driver): driver.execute_script(""" (function () { var y = document.body.sc ...
- jquery的操作
jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行 ...