js(一) 三大事件 实现注册验证
ps：小声比比，为什么一周多没更，因为js真的好难啊。 上一周做了一整周的jsp+sevlet+mysql做了一个MVC模式的最基本的新闻系统源码会有空搞出来的 好累 好多的。
三大事件
（鼠标事件、键盘事件、html事件）
鼠标事件
1 <button onclick="myClick()">鼠标单击</button> 2 <button ondblclick="myDBClick()">鼠标双击</button> 3 <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button> 4 <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button> 5 <button onmousemove="myMouseMove()">鼠标移动</button> 6 <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
键盘事件
<body> <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> </body>
1 <script>
2 /*输出输入的字符*/
3 function myKeyDown(id) {
4 console.log(document.getElementById(id).value);
5 }
6 /*按键结束，字体转换为大写*/
7 function myKeyUp(id) {
8 var text = document.getElementById(id).value;
9 document.getElementById(id).value = text.toUpperCase();
10 }
11 </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>
1 <script>
2 window.onload = function () {
3 console.log("文档加载完毕！");
4 };
5 /*window.onunload = function () {
6 alert("文档被关闭！");
7 };*/
8 /*打印选中的文本*/
9 function mySelect(id) {
10 var text = document.getElementById(id).value;
11 console.log(text);
12 }
13 /*内容被改变时*/
14 function myChange(id) {
15 var text = document.getElementById(id).value;
16 console.log(text);
17 }
18 /*得到光标*/
19 function myFocus() {
20 console.log("得到光标！");
21 }
22 /*窗口尺寸变化*/
23 window.onresize = function () {
24 console.log("窗口变化！")
25 };
26 /*滚动条移动*/
27 window.onscroll = function () {
28 console.log("滚动");
29 }
30 </script>注册实现（关联正则表达式）：
1 function validateUsername() {
2 //通过ID获取页面中输入的username
3 var va = document.getElementById("username").value;
4 //自己赋值的正则表达式
5 var judge = /^[a-zA-Z0-9]{6,12}$/;
6 //判断是否符合
7 if (!judge.test(va)) {
8 //不符合就在行后输出一个错误提示；
9 //利用innerHtml改变页面中userNameError内的值
10 document.getElementById("userNameError").innerHTML = "请输入正确的账号";
11 //更改样式
12 userNameError.style.border = "1px red soild";
13 } else {
14 //正确则不需要填值，所以设置为空就行
15 document.getElementById("userNameError").innerHTML = "";
16 userNameError.style.border = "";
17 }
18 } 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <script>
8 function validateUsername() {
9 var va = document.getElementById("username").value;
10 var judge = /^[a-zA-Z0-9]{6,12}$/;
11 if (!judge.test(va)) {
12 document.getElementById("userNameError").innerHTML = "请输入正确的账号";
13 userNameError.style.border = "1px red soild";
14 } else {
15 document.getElementById("userNameError").innerHTML = "";
16 userNameError.style.border = "";
17 }
18 }
19
20 function validatePassword() {
21 var va = document.getElementById("pwd1").value;
22 var judge = /^[a-zA-Z0-9]{6,12}$/;
23 if (!judge.test(va)) {
24 document.getElementById("passwordError").innerHTML = "请输入正确的密码";
25 passwordError.style.border = "1px red soild";
26 } else {
27 document.getElementById("passwordError").innerHTML = "";
28 passwordError.style.border = "";
29 }
30 }
31
32 function validatePwd() {
33 var pwd1 = document.getElementById("pwd1").value;
34 var pwd2 = document.getElementById("pwd2").value;
35 if (pwd1 != pwd2) {
36 document.getElementById("pwdError").innerHTML = "两次密码不一致";
37 pwdError.style.border = "1px red soild";
38 } else {
39 document.getElementById("pwdError").innerHTML = "";
40 pwdError.style.border = "";
41 }
42 }
43 function validate() {
44 var isError=false;
45 var va = document.getElementById("username").value;
46 var pwd1 = document.getElementById("pwd1").value;
47 var pwd2 = document.getElementById("pwd2").value;
48 var judge = /[a-zA-Z0-9]{6,12}/;
49 if (!judge.test(va)) {
50 document.getElementById("userNameError").innerHTML = "请输入正确的账号";
51 userNameError.style.border = "1px red soild";
52 isError=true;
53 } else {
54 document.getElementById("userNameError").innerHTML = "";
55 userNameError.style.border = "";
56 }
57 if (!judge.test(pwd1)) {
58 document.getElementById("passwordError").innerHTML = "请输入正确的密码";
59 passwordError.style.border = "1px red soild";
60 isError=true;
61 } else {
62 document.getElementById("passwordError").innerHTML = "";
63 passwordError.style.border = "";
64 }
65 if (pwd1 != pwd2) {
66 document.getElementById("pwdError").innerHTML = "两次密码不一致";
67 pwdError.style.border = "1px red soild";
68 isError=true;
69 } else {
70 document.getElementById("pwdError").innerHTML = "";
71 pwdError.style.border = "";
72 }
73
74 if (isError) {
75 return false;
76 }
77 }
78
79 </script>
80 <body>
81 <form onsubmit="return validate()">
82 <table>
83 <tr>
84 <td>账号:</td>
85 <td><input type="text" name="username" id="username" placeholder="请设置账号6-12位" onblur="validateUsername()"/></td>
86 <td>
87 <select name="select" id="select">
88 <option value="0">163.com</option>
89 <option value="1">qq.com</option>
90 <option value="2">126.com</option>
91 </select>
92 <span id="userNameError" style="color:red;"></span>
93 </td>
94 </tr>
95 <tr>
96 <td>密码:</td>
97 <td><input type="password" name="pwd1" id="pwd1" placeholder="请设置登录密码6-12位" onblur="validatePassword()"/></td>
98 <td><span id="passwordError" style="color:red;"></span></td>
99 </tr>
100 <tr>
101 <td>再次输入:</td>
102 <td><input type="password" name="pwd2" id="pwd2" onblur="validatePwd()"/></td>
103 <td><span id="pwdError" style="color:red;"></span></td>
104 </tr>
105 </table>
106 <input type="submit"></input>
107 </form>
108 </body>
109 </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。
1 var str = "Itxueyuan's domain is www.itxueyuan.org. Welcome to itxueyuan !";
2 var pattern = new RegExp("itxueyuan", "ig");
3 var i=1;
4 var result;
5 while(result=pattern.exec(str)){
6 alert(
7 "第 "+i+" 次匹配的字符串："+result[0]+"\n"+
8 "所匹配的字符的起始位置："+result.index+"\n"+
9 "第 "+(++i)+" 次匹配的的起始位置："+pattern.lastIndex
10 );
11 }3.compile() 方法
compile() 方法可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。
语法：
RegExpObject.compile(regexp,modifier)
参数说明：
regexp //正则表达式; modifier //规定匹配的类型。"g" 用于全局匹配，"i" 用于区分大小写，"gi" 用于全局区分大小写的匹配。
例如，在字符串中全局搜索 “man”，并用 “person” 替换。然后通过 compile() 方法，改变正则表达式，用 “person” 替换 “man” 或 “woman”，：
1 var str="Every man in the world! Every woman on earth!"; 2 patt=/man/g; 3 str2=str.replace(patt,"person"); 4 document.write(str2+"<br />"); 5 6 patt=/(wo)?man/g; 7 patt.compile(patt); 8 str2=str.replace(patt,"person"); 9 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();
转载于:https://www.cnblogs.com/LiuOOP/p/11090322.html
js(一) 三大事件 实现注册验证相关推荐
- 【HTML+CSS+JS】简单的登录注册验证
登录注册验证 简单的小说明 效果 源码 HTML 登录注册.html loginSuccess.html CSS JS pageChange.js Click.js 简单的小说明 本文是基于https ...
- JS的DOM操作3--删除事件，注册事件与冒泡⭐⭐⭐(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
- 使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在
使用jquery ajax 实现用户的用户名注册验证,如果该用户已存在则提示该用户已存在 jQuery AJAX 基本使用方法 接口使用 http://180.76.117.80:8080/AjaxS ...
- 控件onkeyup事件，使验证控件不能即时验证
今天我用一个RegularExpressionValidator验证控件验证一个身份证号码(TextBox1) 可当焦点切换时死活都不验证,按理说文本框一失去焦点就即时验证,后来发现是在TextBox ...
- OkHttp实现登录注册验证
首先,添加OkHttp依赖 implementation 'com.squareup.okhttp3:okhttp:3.14.2' 因为静态接口需要Java8才能支持使用,我们要使用静态接口,需要在b ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- 注册验证的时候一直出现的报错问题，终于解决了
今天再注册验证表单的时候一直报错,但是什么都没有改,就报错了,后面才知道原来是和我上次上传图片的时候,导入的2个js的顺序有关系的, 45行和41行互相换一下位置就好了 转载于:https://www ...
- 如何正确使用Node.js中的事件
by Usama Ashraf 通过Usama Ashraf 如何正确使用Node.js中的事件 (How to use events in Node.js the right way) Before ...
- 母版事件中注册javascript脚本
母版事件中注册javascript脚本 ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ Title :㈠母版等事件中注册javascript脚本 De ...
- html四张图片拼图,js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下 html: Document 向右滑动验证 css: *{ margin: 0; padding: 0; } ...
最新文章
- 百架无人机“失控撞楼”，程序员写的 Bug？
- IP别名与多网卡绑定(RHEL5/RHEL6)
- 第十八篇：java操作Excel要处理和分辨的几个概念
- hMailServer C#API
- ASP.NET Web下基于Forms的验证
- 【Mac】Chrome中添加截图扩展插件FireShot方法
- java基础之java内存模型
- DIV+CSS基础教程
- 1-5 线性表元素的区间删除 (20 分)
- 扩展立方体 The Scale Cube
- HDR Tone Mapping
- nmap查看开放端口以及使用的协议
- 应用程序进程启动过程
- NumPy Cookbook 带注释源码 五、NumPy 音频和图像处理
- android 在指定位置添加布局,Android 如何动态添加 View 并显示在指定位置。
- gom引擎登录器_GOM传奇引擎微端配置详细架设语音教程
- python实现移除列表指定位置的元素
- 架构之美第五章-架构概述
- 电路设计_元器件选型总结1
- 基于Spark的学生成绩分析系统