javascript实现的表单验证
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
span{
color:red;
}
</style>
<script type="text/javascript">
function check(frm)
{
/* \s-- 用户输入的空格 制表符 换行符 空白字符等其中的一个 这些都匹配
* $-- 字符串结束的地方匹配
* /g 全局匹配 也就是，每个地方都匹配
* \w a--z A---Z 之间 0---9之间都匹配
* \d 任意数字 0---9之间的任意数字
*/
var uname=frm.username.value.replace(/(^\s+)|(\s+$)/g,"");
var flag = true;
document.getElementById("unameMsg").innerHTML="";
document.getElementById("pwdMsg").innerHTML="";
document.getElementById("pwdMsg2").innerHTML="";
document.getElementById("ageMsg").innerHTML="";
document.getElementById("phoneMsg").innerHTML="";
document.getElementById("emailMsg").innerHTML="";
//用户名的验证
if(uname.length == 0)
{
document.getElementById("unameMsg").innerHTML="用户名不能为空";
flag = false;
}
else if(uname.length <=5||uname.length >=10)
{
document.getElementById("unameMsg").innerHTML="用户名的长度必须是5-10位"
flag = false;
}
else{
if(!(/^\w+$/.test(uname))){
document.getElementById("unameMsg").innerHTML="用户名格式必须是字母数字下划线";
flag = false;
}
}
//密码的验证
var pwd = frm.pwd.value.replace(/(^\s+)|(\s+$)/g,"");
if(pwd.length == 0)
{
document.getElementById("pwdMsg").innerHTML="密码不能为空";
flag = false;
}
else if(pwd.length <= 5||pwd.length >=15){
document.getElementById("pwdMsg").innerHTML="密码长度必须是5到15位";
flag = false;
}
else{
if(!(/^\w+$/.test(pwd))){
document.getElementById("pwdMsg").innerHTML="密码必须是字母数字下划线";
flag = false;
}
}
//确认密码的验证
var pwd2=frm.pwd2.value.replace(/(^\s+)|(\s+$)/g,"")
if(pwd2.length == 0)
{
document.getElementById("pwdMsg2").innerHTML="确认密码不能为空";
flag = false;
}
else if(pwd2.length <=5||pwd2.length >=15)
{
document.getElementById("pwdMsg2").innerHTML="确认密码的长度必须是5-15位";
flag=false;
}
else {
if(!(/^\w+$/.test(pwd2)))
{
document.getElementById("pwdMsg2").innerHTML="确认密码的格式必须是字母数字下划线";
flag = false;
}
}
//判断2次输入的密码是否正确
if(pwd!=pwd2)
{
document.getElementById("pwdMsg2").innerHTML="两次输入的密码不一致,请重新输入";
flag = false;
}
/*
//验证性别
if(!sex[0].checked && !sex[1].checked)
{
alert("请选择性别");
flag = false;
}
*/
//判断年龄 并且位数介于 1--3位之间
var age = frm.age.value.replace(/(^\s+)|(\s+$)/g,"");
if(age.length == 0)
{
document.getElementById("ageMsg").innerHTML="年龄不能为空!";
flag = false;
}
else if(age < 1||age > 200)
{
document.getElementById("ageMsg").innerHTML="年龄必须是介于1到200之间";
flag = false;
}
else{
if(!(/^([0-9]\d+|[0-9])$/.test(age))){
document.getElementById("ageMsg").innerHTML="年龄不能超过3位数或者不是数字";
flag = false;
}
}
//验证手机电话号码
var phone=frm.phone.value.replace(/(s+)|(s+$)/g,"");
if(phone.length == 0)
{
document.getElementById("phoneMsg").innerHTML="电话号码不能为空";
flag = false;
}
else if((phone < 1 && phone > 11))
{
document.getElementById("phoneMsg").innerHTML="电话号码的长度必须是11位";
flag = false;
}
else {
//注意这里的意思和用户输入的信息是恰好相反的
if(!(/^1[3,5,8]\d{9}$/.test(phone)))
{
document.getElementById("phoneMsg").innerHTML="电话号码的格式是13……,15……,18……组成";
flag = false;
}
}
//验证邮箱
var email=frm.email.value.replace(/(^\s+)|(\s+$)/g,"");
if(email.length == 0)
{
document.getElementById("emailMsg").innerHTML="邮箱不能为空";
flag = false;
}
else if(email.length < 0||email.length >50)
{
document.getElementById("emailMsg").innerHTML="邮箱长度必须是0到50之间";
flag = false;
}
else{
if(!(/^[0-9a-zA-Z]\w+@[0-9a-zA-Z]{2,10}.(com.cn|com|net|cn)$/.test(email)))
{
document.getElementById("emailMsg").innerHTML="邮箱格式必须是标准格式";
flag = false;
}
}
return flag;
}
</script>
</head>
<body>
<form onclick="return check(this)" method="post">
用户名:<input type="text" name="username" /><span id=unameMsg ></span><br/>
密码:<input type="password" name="pwd" /><span id=pwdMsg></span><br/>
确认密码<input type="password" name="pwd2" /><span id=pwdMsg2></span><br/>
年龄:<input type=text name="age" /><span id="ageMsg"></span><br/>
手机号码:<input type="text" name="phone"/><span id="phoneMsg"></span><br/>
邮箱:<input type="text" name="email" /><span id="emailMsg"></span><br/>
<input type="submit" value="注册"/>
<input type="reset" value="取消"/>
</form>
</body>
</html>