<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>clientvalidation.html</title>
</head>
<body>
<center>验证报表：</center>
<form action="">
<table style="color: green" align="center">
<tr>
<td>真实姓名：</td>
<td><input type="text" name="realname" id="realname"></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" id="username"> <input
type="button" id="checkUsername" value="查看用户名是否存在"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td>重复密码：</td>
<td><input type="password" name="repassword" id="repassword">
</td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" id="male" name="sex" value="male">男
<input type="radio" id="female" name="sex" value="female">女
<input type="radio" id="both" name="sex" value="both">两性人</td>
</tr>
<tr>
<td>身份证：</td>
<td><input type="text" id="idcard" name="idcard"
value="123456789123456789"></td>
</tr>
<tr>
<th><input type="button" id="save" name="save" value="save">
</th>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("save").onclick = function() {
/** *************************************************************************** */
/**
* 真实姓名验证：非空
* <tr>
* <td>真实姓名：</td>
* <td><input type="text" name="realname" id="realname"></td>
* </tr>
*/
var realname = document.getElementById("realname");
var realnameValue = realname.value;
if (realnameValue == 'null' || realnameValue == ""
|| realnameValue == 'undefined') {
alert("真实姓名不能为空！");
document.getElementById("realname").focus();
return false;
}
/** *************************************************************************** */
/**
* 用户名验证：非空，5-10字符，可以包含中文，一个中文算一个字符
* <tr>
* <td>用户名：</td>
* <td><input type="text" name="username" id="username"> </td>
* </tr>
*/
var username = document.getElementById("username");
var usernameValue = username.value;
if (usernameValue == 'null' || usernameValue == ""
|| usernameValue == 'undefined') {
alert("用户名不能为空！");
document.getElementById("username").focus();
return false;
}
var pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{0,4}$/;
if (pattern.test(usernameValue)) {
alert("用户名不能少于5位！");
document.getElementById("username").focus();
return false;
}
var pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{11,}$/;
if (pattern.test(usernameValue)) {
alert("用户名不能超出8位！");
document.getElementById("username").focus();
return false;
}
/** *************************************************************************** */
/**
* 密码的验证：不能为空，6-12个字符，不能包含中文字符
* <tr>
* <td>密码：</td>
* <td><input type="password" name="password" id="password"> </td>
* </tr>
*/
var password = document.getElementById("password");
var pswValue = password.value;
if (pswValue == 'null' || pswValue == "" || pswValue == 'undefined') {
alert("密码不能为空！");
document.getElementById("password").focus();
return false;
}
var pattern = /^[a-zA-Z0-9]{0,5}$/;
if (pattern.test(pswValue)) {
alert("密码不能少于6位！");
document.getElementById("password").focus();
return false;
}
var pattern = /^[a-zA-Z0-9]{13,}$/;
if (pattern.test(pswValue)) {
alert("密码不能超出12位！");
document.getElementById("password").focus();
return false;
}
var pattern = /^.*[\u4e00-\u9fa5].*$/;
if (pattern.test(pswValue)) {
alert("密码不能包含中文字符！");
document.getElementById("password").focus();
return false;
}
/** *************************************************************************** */
/**
* 重复密码的验证：不能为空，6-12个字符，不能包含中文字符
* <tr>
* <td>重复密码：</td>
* <td><input type="password" name="repassword"> </td>
* </tr>
*/
var repassword = document.getElementById("repassword");
var repasswordValue = repassword.value;
if (repasswordValue != document.getElementById("password").value) {
alert("密码不一致，请重新输入！");
document.getElementById("repassword").focus();
return false;
}
/** *************************************************************************** */
/**
* 身份证的验证：不能为空，15位或者18位数字
* <tr>
* <td>身份证：</td>
* <td><input type="text" id="idcard" name="idcard"> </td>
* </tr>
*
*/
var idcard = document.getElementById("idcard");
var idcardValue = idcard.value;
if (idcardValue == 'null' || idcardValue == ""
|| idcardValue == 'undefined') {
alert("身份证不能为空！");
document.getElementById("idcardValue").focus();
return false;
}
if (!(idcardValue.length == 15 || idcardValue.length == 18)) {
alert("身份证只能是15或者18位！");
document.getElementById("idcardValue").focus();
return false;
}
if (idcardValue.length == 15) {
var pattern = /^\d{15}$/;
if (!pattern.test(idcardValue)) {
alert("15位身份证输入有误！");
}
}
if (idcardValue.length == 18) {
var pattern = /^\d{18}|\d{17}[X]$/;
if (!pattern.test(idcardValue)) {
alert("18位身份证输入有误！");
}
}
/** *************************************************************************** */
/**
* 验证email，非空，要符合格式
* <tr>
* <td>Email:</td>
* <td><input type="text" name="email" id="email"></td>
* </tr>
*/
var email = document.getElementById("email");
var emailValue = email.value;
if (emailValue == 'null' || emailValue == ""
|| emailValue == 'undefined') {
alert("Email不能为空");
document.getElementById("email").focus();
return false;
}
var pattern = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
var flag = pattern.test(emailValue);
if (!flag) {
alert("Email格式不正确！");
document.getElementById("email").focus();
return false;
}
/** *************************************************************************** */
};
};
</script>
</html>