登录时，姓名密码格式验证（用jsp，正则表达式实现）
运行截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录验证</title>
<style>
#tables {
border: 1px red solid;
width: 450px;
height: 120px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: left;
}
.error2 {
color: #ff0d00;
}
.error1 {
color: #00ff40;
}
</style>
<script>
function fun1() {
var yn = true;
/*第一点，获取登录页面传进来的参数。特别注意的get到以后一定要.value获取他的value值
* 注意区别与valueof()的区别。字符串与object对象，属性与方法
* */
//var aa=frm.name.value; 通过表单中的id获取value值;
// 或者 var aa=frm.name.value;通过name获取也可以
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
/*正则表达式
* 命名为/^ $/
* 其中^为开始，$为结束符号
* */
var names = /^[1-9a-zA-Z]{3,10}$/;
var pwds = /^[1-9a-zA-Z]{3,10}$/;
/*test()方法判断是否符合条件
*这里要去反!，方便操作，范围大的在前面，范围小的在后面
*
* */
if (!names.test(name)) {
yn = false;
/*
* 根据id找到这个容器，讲内容以html的格式传入到这个容器里面
* 顺便将他的class值改变，随之而来的就是颜色的改变，
* 错误显示红色，正确为绿色
* */
document.getElementById("nameerror").innerHTML = "<div class='error2'>*学号输入格式错误</div>";
document.getElementById("pwderror").innerHTML = "<div class='error2'>*密码输入格式错误</div>";
return yn;
}
/*
* 同上
* */
if (!pwds.test(pwd)) {
yn = false;
/*
* 这里是前面账号已经可以了，只是密码不正确
* 就重置账号的错误提示
* */
document.getElementById("pwderror").innerHTML = "<div class='error2'>*密码输入格式错误</div>";
document.getElementById("nameerror").innerHTML = "<div class='error1'>*账号输入格式正确</div>";
return yn;
}
/*
* 返回这个boolean代表的值
* 为true的话就跳转
* 为false的话就不跳转
* */
return yn;
}
</script>
</head>
<body>
<form action="index.html" method="get" id="frm" name="frm">
<div id="tables">
<table style=" width: 100% ; height: 100%; ">
<tr>
<th>姓名：</th>
<td><input type="text" name="name" id="name"></td>
<td id="nameerror">*</td>
</tr>
<tr>
<th>密码：</th>
<td><input type="password" name="pwd" id="pwd"></td>
<td id="pwderror">*</td>
</tr>
<tr>
<th>性别：</th>
<td>
<!--用单选框-->
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
<!--用下拉框-->
<!--<select name="gender">-->
<!--<option value="男">男</option>-->
<!--<option value="女">女</option>-->
<!--</select>-->
</td>
<td></td>
</tr>
<tr>
<th></th>
<!--这里设置一个点击事件，return trun/false; 这里fun1()回返回一个true或者false，然后判断是否跳转-->
<td><input type="submit" onclick="return fun1();" value="提交"/></td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>