表單驗證
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//表單驗證
function checkform()
{
//1. 校驗用戶名 5位以上字母
//2. 校驗密碼 6位以上字母
//3. 確認密碼和密碼一樣
if(checkusername() && checkpassword() && checkpassword2())
{
return true;
}
alert("請修改信息再提交");
return false;
}
function checkusername()
{
var username = document.getElementById("username").value;
if(username.length<=5)
{
document.getElementById("usernamemsg").innerHTML = "x";
return false;
}
else
{
document.getElementById("usernamemsg").innerHTML = "√";
return true;
}
}
function checkpassword()
{
var pwd = document.getElementById("pwd").value;
if(pwd.length<=6)
{
document.getElementById("pwdmsg").innerHTML = "x";
return false;
}
else
{
document.getElementById("pwdmsg").innerHTML = "√";
return true;
}
}
function checkpassword2()
{
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
if(pwd==pwd2)
{
document.getElementById("pwd2msg").innerHTML = "√";
return true;
}
else
{
document.getElementById("pwd2msg").innerHTML = "x";
return false;
}
}
</script>
<form action="http://www.baidu.com" method="post" onsubmit="return checkform()">
<input name="username" id="username" type="text" placeholder="用戶名" onblur="checkusername()"/><span id="usernamemsg"></span><br/>
<input name="pwd" id="pwd" type="password" placeholder="密碼" onblur="checkpassword()"/><span id="pwdmsg"></span><br/>
<input name="pwd2" id="pwd2" type="password" placeholder="確認密碼" onblur="checkpassword2()"/><span id="pwd2msg"></span><br/>
<input name="email" id="email" type="email" placeholder="郵箱"/>
<button type="submit">提交</button>
</form>
</body>
</html>
~~~
```
正則表達式:
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" onblur="checkvalue(this)"/>
<input type="text" onblur="checkusername(this)"/>
<script>
//正則表達式,不是js特有的,各個語言對于語法支持上略有區別
function checkvalue(ctrl)
{
//1. 校驗一下郵政編碼
var reg = /^\d{6}$/;
//2. 郵政編碼
var postcode = ctrl.value;
//3. 校驗
if(reg.test(postcode))
{
console.log("符合");
}
else
{
console.log("不符合");
}
}
//2. 校驗6位以上字母數字下劃線
// /^\w{6,}$/
//3. 校驗身份證號碼(18位),其中最后一位可能X
// /^\d{17}[0-9X]$/
//4. 郵箱校驗
// /^\w+@\w+(\.\w{2,3}){1,2}$/
//5. 校驗密碼的安全性,6位以上,字母數字,下劃線,大寫字母
// /^ \w{6,} $/
function checkusername(ctrl)
{
var str = ctrl.value;
var reg = /^\w{6,}$/;
if(!reg.test(str))
{
alert("不符合");
return;
}
//判斷是否包含大寫字母
var isFound = false;
for(var i=0; i<str.length;i++)
{
if(str.charAt(i)>="A" && str.charAt(i)<="Z")
{
//包含大寫字母了
isFound = true;
break;
}
}
if(!isFound)
{
alert("不符合");
return;
}
alert("符合");
}
</script>
</body>
</html>
~~~
```
