js(一) 三大事件实现注册验证

ps：小声比比，为什么一周多没更，因为js真的好难啊。上一周做了一整周的jsp+sevlet+mysql做了一个MVC模式的最基本的新闻系统源码会有空搞出来的好累好多的。

三大事件

（鼠标事件、键盘事件、html事件）

鼠标事件

click：单击

dblclick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

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>

键盘事件

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

<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事件

load：文档加载完成

select：被选中的时候

change：内容被改变

focus：得到光标

resize：窗口尺寸变化

scroll：滚动条移动

<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.验证账号，密码，再次输入密码。

 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   }

2.当你点击提交的时候，如果有错误，肯定不能提交上去，所以我们不能让提交事件发生，此时我们就添加了一个validate()方法；

　　它的原理就是讲submit中返回值false时就是提交不成功，所以只要有一次出错，flag（error）就为true此时提交将无法使用。

  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();

posted @ 2019-06-26 15:51 刘认真阅读(1309) 评论(0) 编辑收藏举报

刷新页面返回顶部

刘认真

js(一) 三大事件 实现注册验证