在该笔记中将学到列表展示中表单验证的方法与展示效果
本系列的是参考慕课网 江老师老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。
正则表达式
特殊符号： ! $ ^ * + = | . ? / \ ( ) [ ] { }
特殊字符：o t n v f r xnn uxxx cX
以上的特殊符号和特殊字符在正则表达式中匹配的时候，都需要进行转义(\)。
JavaScript中正则表达式的用法有两种：
var re = new RegExp("a", "i")var re = /a/i
字符类：
重复类：
选择符：匹配 a或 b。var re = /a|b/i
定位符：
分组：
标志：
表单验证实现
实现效果如下：
大部分的验证都需要使用正则表达式，在 onfocus、onkeyup 和 onblur 三个事件上添加事件。
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="uft-8">
<style type="text/css">
*{margin: 0; padding: 0;}
.wrap{width: 600px;height: 200px;margin:200px auto;font-size: 14px;}
.wrap div{width: 500px;height: 40px; margin-left: 50px;overflow: hidden;margin-top: 10px;}
.wrap .pass-status{margin-top: 0;}
.wrap label{width: 80px;display: block;text-align: right;float: left;}
.wrap input[type="text"], input[type="password"]{width: 100px;height: 18px;line-height: 18px;display: block;float: left;}
#name-len{display: block;float: left;font-size: 10px;margin-left: 80px;color: #aaa;margin-top:2px;visibility: hidden;font-style: normal;}
.wrap .behind{width: 300px;height: 18px; line-height: 14px; overflow: hidden;display:block;font-size: 12px;margin-top: 5px;padding-left: 5px;color: #aaa;visibility: hidden;}
.wrap .pass-status{padding-left: 28px;}
.wrap .below{display: block;height: 12px;width: 34px;float: left;margin-top: 2px;line-height: 12px;background-color: orange;margin-left: 1px;font-size: 10px;text-align: center;padding-top: 2px;color: #FFF;}
.wrap .active{background-color: orangered;}
.auth{display:block;width: 70px;height: 20px;padding-left: 5px;}
input[type="submit"]{margin-left: 130px;background-color: orangered;color: #FFF;border: 1px solid orangered;border-radius: 4px;width: 150px;height: 30px;line-height: 30px;font-size: 14px;cursor: pointer;}
</style>
<script>
function getNameLen(value){
//\ux00-xff 匹配的是ASCII 码中的单字符
return value.replace(/[^\x00-xff]/g, "xx").length;
}
function setActive(password,passTipBelow, len){
if(password.length>len) {
if(passTipBelow.className.indexOf(" active") === -1) {
passTipBelow.className = passTipBelow.className + " active";
}
} else {
passTipBelow.className = passTipBelow.className.replace(" active", "");
}
}
function countChar(str, char) {
let tmp = 0;
for(var i=0; i<str.length; i++) {
if(str.charAt(i) == char) {
tmp++;
}
}
return tmp;
}
window.onload = function(){
let inputs = document.getElementsByTagName("input");
let name = inputs[0];
let pass = inputs[1];
let repass = inputs[2];
let spans = document.getElementsByTagName("span");
let nameTipBehind = spans[0];
let passTipBebind = spans[1];
let passTipWeak = spans[2];
let passTipMiddle = spans[3];
let passTipStrong = spans[4];
let repassTip = spans[5];
let nameTipBelow = document.getElementById("name-len");
//匹配会员名，使用 数字，英文(不分大小写)，汉字，下划线，5-25个字符，推荐使用中文会员名
//数字，英文：\w
//汉字：unicode \u4e00 - \u9fa5
// var re = /[^\w\u4e00-\u9fa5]/g;
name.onfocus = function(){
nameTipBehind.style.visibility = "visible";
nameTipBehind.innerHTML = "5-25个汉字，一个汉字为两个字符，推荐使用中文会员名";
}
name.onkeyup = function(){
nameTipBelow.style.visibility = "visible";
let nameLen = getNameLen(this.value);
var re = /[^\w\u4e00-\u9fa5]/g;
if(nameLen == 0) {
//含有非法字符,不能为空,长度超过25个字符,长度少于6个字符
nameTipBehind.innerHTML = "5-25个汉字，一个汉字为两个字符，推荐使用中文会员名";
}else if(re.test(this.value)){
nameTipBehind.innerHTML = "含有非法字符";
}else if(nameLen < 6) {
nameTipBehind.innerHTML = "长度小于6个字符";
}else if(nameLen > 25) {
nameTipBehind.innerHTML = "长度大于25个字符";
}else{
nameTipBehind.innerHTML = "符合要求";
}
if(nameLen !== 0) {
nameTipBelow.innerHTML = nameLen + "个字符";
}else{
nameTipBelow.style.visibility = "hidden";
}
}
name.onblur = function(){
nameTipBelow.style.visibility = "hidden";
}
pass.onfocus = function(){
passTipBebind.style.visibility = "visible";
passTipBebind.innerHTML = "6-16个字符，请使用字母加数字或符号的组合密码。";
}
pass.onkeyup = function(){
//大于5个字符，为中等强度的密码，大于10个字符，为高等强度的密码
let password = this.value;
setActive(password, passTipWeak, 0);
setActive(password, passTipMiddle, 5);
setActive(password, passTipStrong, 10);
if(password.length > 5) {
repass.removeAttribute("disabled");
repassTip.style.visibility = "visible";
} else{
repass.setAttribute("disabled", "disabled");
repassTip.style.visibility = "hidden";
}
}
pass.onblur = function(){
//进行密码验证，密码不能为空，不能使用相同的字符，长度应为6-16个字符，不能全为数字，不能全为字母。
let reT = /[^a-zA-Z]/g;
let reN = /[^\d]/g;
let password = this.value;
if(password=="") {
passTipBebind.innerHTML = "密码不能为空";
} else if(password.length == countChar(password, password[0])) {
passTipBebind.innerHTML = "不能使用相同的字符";
} else if(password.length <6){
passTipBebind.innerHTML = "密码的长度最少为6位数";
} else if(password.length > 15 ){
passTipBebind.innerHTML = "密码的长度最多为15位数";
} else if(!reT.test(password)){
passTipBebind.innerHTML = "密码不能全部为字母";
} else if(!reN.test(password)){
passTipBebind.innerHTML = "密码不能全部为数字";
} else {
passTipBebind.innerHTML = "OK";
}
}
repass.onblur = function(){
let password = pass.value;
let repassword = this.value;
if(password != repassword) {
repassTip.innerHTML = "两次输入的密码不同";
} else{
repassTip.innerHTML = "OK";
}
}
}
</script>
</head>
<body>
<div class="wrap">
<form>
<div>
<label for="name">会员名：</label>
<input type="text" id="name">
<span class="behind">5-25个汉字，一个汉字为两个字符，推荐使用中文会员名</span>
<i id="name-len">0个字符</i>
</div>
<div>
<label for="password">登录密码：</label>
<input type="password" id="password">
<span class="behind"></span>
<div class="pass-status">
<span id="weak" class="below">弱</span><span id="middle" class="below">中</span><span id="strong" class="below">强</span>
</div>
</div>
<div>
<label for="repass">密码确认：</label>
<input type="password" id= "repass" disabled>
<span class="behind">请再输入一次</span>
</div>
<div>
<label for="authcode">验证码：</label>
<input type="text" id="authcode">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img58.jpg" alt="" class="auth">
</div>
<input type="submit" value="同意协议并注册"></input>
</form>
</div>
</body>
</html>