事件
1)鼠标事件
mousedown
mouseup
2)键盘事件
a) keydown:键被按下
b) keyup:键抬起
c) keypress:按下可打印字符的键时。
document.onkeydown = function(ev){ if(ev.keyCode == 13){ console.log("提交"); } }
3)焦点事件
a) 获取焦点:focus
b)失去焦点:blur
4)其他事件
a) change:选择发生改变触发事件(单选,多选,select)
b) select:选择(下拉)
简单实例：省市联动
//1.数据模拟 var arr = new Array(); arr["北京市"]=["海淀区","昌平区","崇文区"]; arr["上海市"]=["闵行区","徐汇区","松江区"]; arr["重庆市"]=["北碚区","随便去"]; //2.设置省份值 var province = document.getElementsByName("province")[0]; for(var i in arr){ //option value 内容区 //创建option var option = new Option(i,i); //添加到province province.appendChild(option); } //3.设置城市 var city = document.getElementsByName("city")[0]; //获取选择的省份 province.onchange = function(){ var cities = arr[this.value]; //清空 city.options.length=1; for(var i in cities){ var option = new Option(cities[i],cities[i]); city.appendChild(option); } }
表单验证
1)什么是表单验证
前台验证。请求未发出之前进行的校验。
2)为什么使用表单验证
a) 减轻服务器压力
b) 保证数据安全
c) 提升用户体验
3) 如何实现表单验证
1.阻止默认提交 onsubmit return false;
2.验证表单项(失焦事件) onblur
正则表达式
弥补字符串验证的局限性。简洁。
符号表示
|
符号 |
描述 |
|
/…/ |
代表一个模式的开始和结束 |
|
^ |
匹配字符串的开始 |
|
$ |
匹配字符串的结束 |
|
\s |
任何空白字符 |
|
\S |
任何非空白字符 |
|
\d |
匹配一个数字字符，等价于[0-9] |
|
\D |
除了数字之外的任何字符，等价于[^0-9] |
|
\w |
匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_] |
|
. |
除了换行符之外的任意字符 |
|
符号 |
描述 |
|
{n} |
匹配前一项n次 |
|
{n,} |
匹配前一项n次，或者多次 |
|
{n,m} |
匹配前一项至少n次，但是不能超过m次 |
|
* |
匹配前一项0次或多次，等价于{0,} |
|
+ |
匹配前一项1次或多次，等价于{1,} |
|
？ |
匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} |
校验方式
a) str.match(regex)
返回值为null为不满足规范。
b)regex.test(str)
验证通过为true；否则为false。
简单示例：表单提交
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 var userPass = false; 8 var pwdPass = false; 9 var repwdPass = false; 10 var mailPass = false; 11 12 function regUser(ele){ 13 var val = ele.value; 14 var nextSpan = ele.nextElementSibling; 15 var reg = /^\w{6,20}$/; 16 console.log(reg.test(val)); 17 if(reg.test(val)){ 18 nextSpan.innerHTML = "用户名符合要求"; 19 nextSpan.style.color="greenyellow"; 20 userPass = true; 21 }else{ 22 nextSpan.innerHTML = "用户名不符合要求"; 23 nextSpan.style.color="red"; 24 userPass = false; 25 } 26 } 27 28 function regPwd(ele){ 29 var val = ele.value; 30 var nextSpan = ele.nextElementSibling; 31 var reg = /^\w{8}$/; 32 if(reg.test(val)){ 33 nextSpan.innerHTML = "密码符合要求"; 34 nextSpan.style.color="greenyellow"; 35 pwdPass = true; 36 }else{ 37 nextSpan.innerHTML = "密码不符合要求"; 38 nextSpan.style.color="red"; 39 pwdPass = false; 40 } 41 } 42 43 function regRePwd(ele){ 44 var val = ele.value; 45 var pwd = document.getElementById("pwd").value; 46 var nextSpan = ele.nextElementSibling; 47 if(val != pwd){ 48 nextSpan.innerHTML = "密码不一致"; 49 nextSpan.style.color="red"; 50 repwdPass = false; 51 }else{ 52 nextSpan.innerHTML = "密码一致"; 53 nextSpan.style.color="greenyellow"; 54 repwdPass = true; 55 } 56 } 57 58 function regMail(ele){ 59 var val = ele.value; 60 var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; 61 var nextSpan = ele.nextElementSibling; 62 if(reg.test(val)){ 63 nextSpan.innerHTML = "邮箱格式正确"; 64 nextSpan.style.color = "greenyellow"; 65 mailPass = true; 66 }else{ 67 nextSpan.innerHTML = "邮箱格式不正确"; 68 nextSpan.style.color = "red"; 69 mailPass = false; 70 } 71 } 72 73 function regSub(){ 74 return userPass&&pwdPass&&repwdPass&&mailPass; 75 } 76 77 </script> 78 <style> 79 #register{ 80 width: 1000px; 81 float: left; 82 } 83 form{ 84 float: left; 85 margin-left: 20px; 86 } 87 .txt{ 88 margin-left: 10px; 89 90 } 91 .beforeTxt{ 92 float: left; 93 width: 72px; 94 } 95 </style> 96 </head> 97 <body> 98 <div > 99 <form action="#" method="get" onsubmit="return regSub()"> 100 <p> 101 <div class="beforeTxt">用户名:</div> 102 <input type="text" onblur="regUser(this)" name="user" class="txt" /> 103 <span>*用户名长度为6~20位</span> 104 </p> 105 <p> 106 <div class="beforeTxt">密码:</div> 107 <input type="password" /> 108 <span>*密码长度最少为8位</span> 109 </p> 110 <p> 111 <div class="beforeTxt">确认密码:</div> 112 <input type="password" onblur="regRePwd(this)" class="txt" /> 113 <span>*密码长度最少为8位</span> 114 </p> 115 <p> 116 <div class="beforeTxt">邮箱:</div> 117 <input type="text" onblur="regMail(this)" class="txt" /> 118 <span>*邮箱格式必须正确</span> 119 </p> 120 <p><input type="submit" value="注册" " /></p> 121 </form> 122 </div> 123 </body> 124 </html>