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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
随机推荐
- Direct2D 第5篇 绘制图像
原文:Direct2D 第5篇 绘制图像 我加载的图像是一张透明底PNG图像,背景使用渐变的绿色画刷 #include <windows.h> #include <d2d1.h> ...
- 【JZOJ4928】【NOIP2017提高组模拟12.18】A
题目描述 数据范围 对于100%的数据,n<=100000,1<=A[i]<=5000 =w= Ans=∏1ai 代码 #include<iostream> #inclu ...
- 使用multiprocessing的问题总结
Python2中的multiprocessing模块,规避了GIL(Global Interpreter Lock)带来的多线程无法实际并发的缺点,设计了几乎与threading模块一模一样的API, ...
- EL表达式简单总结
EL表达式 ## EL表达式的取值范围 JSP的四个作用域: pagecontext(生命周期用户离开或者跳转页面,作用域范围这个页面) request(生命周期用户离开页面,作用于这个页面) ses ...
- 从零学React Native之08Image组件
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...
- javascript中数字的一些常规操作
1,禁止输入 - (减号.负号) // html <input type="number" class="no-negative"> // js $ ...
- idea java内存分析工具
https://blog.csdn.net/qq_22194659/article/details/83829891 https://www.ej-technologies.com/products/ ...
- 【vb.net机房收费系统】之没有包含要从继承的组件的已生成程序集 标签： vb.net继承 2015-05-02 15:19 1012人阅读
在敲到组合查询这个功能的时候,需要用到窗体的继承,但是在新建继承窗体的时候,出现了错误(没有包含要从继承的组件的已生成程序集).如下图: 问题的产生:当时没怎么注意,也不知道怎么弄的,最后反正是继承上 ...
- @hdu - 5960@ Subsequence
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定如下计算序列权值的函数: 对于一个由三元组 (cost0, ...
- Python多版本pip安装库的问题
引 机器上总是会有Python2.7的版本和Python3.x的版本,今天接触到一台服务器上面有Python2.7和Python3.4,想在Python3.4下安装一个TensorFlow,但不管怎么 ...