利用JavaScript或者jQuery等完成页面元素合法性的校验，例如当用户输入的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离2，开姓名框则后面的文字变为绿色。尝试了多次，但是点击还是输入错误都没有变化。
```css
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8" /> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户注册</title>
</head>
<body>
<form>
<table align="center" width="500">
<tr>
<td>用户名：</td>
<td>
<input name="username" type="text" id="un"/>
<span id="un">用户名由3-5个字符组成</span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input name="password" type="password" id="pw"/>
<span id="pw">请输入8-12位密码</span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input name="pwdrepeat" type="password" id="pwr"/>
<span id="pwr">两次密码不一致</span>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input name="email" type="email" id="em"/>
<span id="em">格式示例：xxxxxxx@163.com</span>
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input name="telphone" type="text" id="tel"/>
<span id="tel">格式示例:13803780000</span>
</td>
</tr>
<tr>
<td>真实姓名：</td>
<td>
<input name="rename" type="text" id="rn"/>
<span id="rn">由2-5个中文组成</span>
</td>
</tr>
<tr>
<td >省份：</td>
<td>
<!-- <input list="area" /> -->
<!-- <datalist id="area" >
<option value="北京">
<option value="上海">
<option value="河南">
</datalist> -->
<select name="area">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">河南</option>
</select>
请选择省份
</td>
<!-- <td>请选择省份</td> -->
</tr>
<tr>
<td>技术方向：</td>
<td>
<input name="diff" type="radio" value="1"/>Java
<input name="diff" type="radio" value="2"/>.Net
<input name="diff" type="radio" value="3"/>PHP
<input name="diff" type="radio" value="4"/>网页
<input name="diff" type="radio" value="5"/>IOS
<input name="diff" type="radio" value="6"/>Android
</td>
</tr>
<tr colspan="2" aligin="center">
<td></td>
<td>
<input type="submit" name="submit" value="注册" />
<input type="reset" name="reset" value="重置" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function checkForm(){
if(document.getElementById("un").value.length<3||document.getElementById("username").value.length>5){
document.getElementById("username").innerHTML="<em style='color:#FF0000'>用户名由3-5位2字符组成</em>";
document.getElementById("un").focus();
return false;
}
else{
document.getElementById("username").innerHTML="<em style='color:#3FBF3F'></em>";
}
//检验密码是否合格
if(document.getElementById("pw").value.length<8||document.getElementsByClassName(“pw).value.lenght>12){
document.getElementById("password").innerHTML="<em style='color:#FF0000'>请输入8-12位密码</em>";
document.getElementById("pw").focus();
return false;
}
else{
document.getElementById("password").innerHTML="<em style='color:#3FBF3F'></em>";
}
//检验两次密码是否一致
if(document.getElementById("pwr").value ！= document.getElementById("PW").value){
document.getElementById("pwdrepeat").innerHTML="<em style='color:#FF0000'>两次密码输入不一致</em>";
document.getElementById("pwr").focus();
return false;
}
else{
document.getElementById("pwdrepeat").innerHTML="<em style='color:#3FBF3F'></em>";
}
//获取Email的域值
var email = document.getElementById("em").value;
//电子邮箱的正则表达式
var pattern = /^[a-zA-Z0-9#_\^\$\.\*\+\-\?\=\!\|\\\/\(\)\[\]\{\}]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(email.length==0){
document.getElementById("email").innerHTML="<em style='coloe:#FF0000'>电子邮箱不能为空</em>"
document.getElementById("em").focus();
return false;
}
else if(!pattern.test(email))
{
document.getElementById("email").innerHTML="<em style='coloe:#FF0000'>电子邮箱不能为空</em>"
document.getElementById("em").focus();
return false;
}
else{
document.getElementById("email").innerHTML="<em style='color:#3FBF3F'></em>";
}
}
</script>
</body>
</html>
```
