利用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>
```
题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~
<!DOCTYPE html>
<html>
<head>
<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>
<style>
.red{color:#f00}
.green{color:green}
</style>
<form >
<table align="center" width="500">
<tr>
<td>用户名：</td>
<td>
<input name="username" type="text" id="un" class="valid" />
<span id="un">用户名由3-5个字符组成</span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input name="password" type="password" id="pw" class="valid" />
<span id="pw">请输入8-12位密码</span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input name="pwdrepeat" type="password" id="pwr" class="valid" />
<span id="pwr">两次密码不一致</span>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input name="email" type="email" id="em" class="valid" />
<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 src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$('.valid').blur(function () {
switch (this.name) {
case 'username':
$(this).next().attr('class', this.value.length < 3 || this.value.length > 5 ? 'red' : 'green');
break;
case 'password':
$(this).next().attr('class', this.value.length < 8 || this.value.length > 12 ? 'red' : 'green');
if (this.form.pwdrepeat.value!='')$(this.form.pwdrepeat).trigger('blur')
break;
case 'pwdrepeat':
$(this).next().attr('class', this.value == '' ||this.value!=this.form.password.value ? 'red' : 'green');
break;
case 'email':
$(this).next().attr('class', /^[a-zA-Z0-9#_\^\$\.\*\+\-\?\=\!\|\\\/\(\)\[\]\{\}]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value) ? 'green' : 'red');
break;
}
});
$('form').submit(function () {
$('.valid').trigger('blur');
if ($(this).find('.red').length > 0) { alert('数据有误，请确认！'); return false }
})
</script>
</body>
</html>
也许每个人的做法都不一样，我的做法是：
我会先将错误提示的DOM节点写好，也就是你原来的，然后让提示的样式为visibility:hidden，先让提示隐藏，当焦点离开输入框onblur时，让其显示出来visibility:visible，且改变文字颜色color，这样做不仅能达到想要的效果，还有一个好处就是在操作DOM节点的时候只会触发重绘不会触发回流，因为只改变DOM样式，不改变其大小