表单验证的实例
==============================1.页面的布局——table==========================
每一个HTML元素对javascript而言都属于一个对象。
取得元素对象：document.getElementById();
基础的布局是使用表格的方式实现布局，因为表单的操作几乎都是固定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
background: #F2F2F2;
font-weight: bold;
color: #000000;
}
.right{
background: #F5F5F5;
font-weight: bold;
color: #000000;
border: 1px solid green;
}
.wrong{
border: 1px solid red;
background: #F5F5F5;
font-weight: bold;
color: #000000;
}
.title{
font-weight: bold;
font-size: 18px;
}
</style>
<title>员工信息输入系统</title>
</head>
<body>
<form action="show.html" method="post">
<table border="1px" cellspacing="0" cellpadding="5px" width="100%">
<tr>
<td colspan="3" >
<span class="title" >增加雇员信息</span>
</td>
</tr>
<tr>
<td width="15%">雇员编号：</td>
<td width="45%">
<input type="text" id="enum" name="enum" class="init">
</td>
<td width="40%">
<span id="enumMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">雇员姓名：</td>
<td width="45%">
<input type="text" id="ename" name="ename" class="init">
</td>
<td width="40%">
<span id="enameMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">雇员职位：</td>
<td width="45%">
<input type="text" id="job" name="job" class="init">
</td>
<td width="40%">
<span id="jobMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">雇员日期：</td>
<td width="45%">
<input type="text" id="hiredate" name="hiredate" class="init">
</td>
<td width="40%">
<span id="hiredateMsg" class="init"></span>
</td>
<tr>
<td><strong>基本工资：</strong></td>
<td><input type="text" name="sal" id="sal" class="init"></td>
<td><span id="salMsg" class="init"></span></td>
</tr>
<tr>
<td><strong>佣 金：</strong></td>
<td><input type="text" name="comm" id="comm" class="init"></td>
<td><span id="commMsg" class="init"></span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
</script>
</body>
</html>
===============================================2.基本验证=================================================
基本验证走的还是之前记录的表单验证的老路，对每一个input标签添加onblur事件，检查是否符合处置函数，然后再form上加一个onsubnmit
事件，用来对所有单一验证的处理函数做一个汇总，然后决定是否可以提交，注意这里onsubmit=“return validate()”
<script type="text/javascript">
function validateEnum() {
var obj=document.getElementById('enum');
var str=document.getElementById('enumMsg');
if(/^\d{4}$/.test(obj.value)){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="输入格式错误";
str.className="wrong";
return false;
}
}
function validateEname() {
var obj=document.getElementById('ename');
var str=document.getElementById('enameMsg');
if(obj.value!=""){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="内容不可为空！";
str.className="wrong";
return false;
}
}
function validateJob() {
var obj=document.getElementById('job');
var str=document.getElementById('jobMsg');
if(obj.value!=""){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="内容不可为空！";
str.className="wrong";
return false;
}
}
function validateDate() {
var obj=document.getElementById('hiredate');
var str=document.getElementById('hiredateMsg');
if(/^\d{4}-\d{2}-\d{2}$/.test(obj.value)){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="输入格式错误！";
str.className="wrong";
return false;
}
}
function validateSal() {
var obj=document.getElementById('sal');
var str=document.getElementById('salMsg');
if(/^\d.+(\.\d{1,2})?$/.test(obj.value)){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="输入格式错误！";
str.className="wrong";
return false;
}
}
function validateComm() {
var obj=document.getElementById('comm');
var str=document.getElementById('commMsg');
if(/^\d.+(\.\d{1,2})?$/.test(obj.value)){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="输入格式错误！";
str.className="wrong";
return false;
}
}
function validate() {
return validateComm()&&validateSal()&&validateDate()&&validateJob()&&validateEnum()
&&validateEname();
}
</script>
=================================================3.优化代码结构==============================================
判断代码是好坏的标准（代码写的是否简单，能否用少的代码实现更多的功能）
新建一个emp_xx.js文件，是保存所有的通用操作函数。validateRegex(eleName,regex)和validateEmpty(eleName)
创建一个日期组件，方便用户不用手动填写。下载My97DatePicker文件，将整个包内文件放入js文件夹内，
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
<input type="text" name="hiredate" id="hiredate" class="init" onclick="WdatePicker()" readonly>
//正则表达式验证
function validateRegex(eleName, regex) {
var obj = document.getElementById(eleName); //取得对象
var msg = document.getElementById(eleName + "Msg"); //取得提示信息
if (regex.test(obj.value)) { //进行内容的验证
obj.className = "right"; //更换使用的样式
if (msg != null) {
msg.innerHTML = "<font color='green'>内容输入正确！</font>";
}
return true; //为以后的综合验证准备
} else { //验证不通过
obj.className = "wrong"; //更换使用的样式
if (msg != null) {
msg.innerHTML = "<font color='red'>输入内容格式错误！</font>";
}
return false; //为以后的综合验证准备
}
}
function validateEmpty(eleName) { //验证指定元素内容是否为空
var obj = document.getElementById(eleName); //取得对象
var msg = document.getElementById(eleName + "Msg"); //取得提示信息
if (obj.value != "") { //进行内容的验证
obj.className = "right"; //更换使用的样式
if (msg != null) {
msg.innerHTML = "<font color='green'>内容输入正确！</font>";
}
return true; //为以后的综合验证准备
} else { //验证不通过
obj.className = "wrong"; //更换使用的样式
if (msg != null) {
msg.innerHTML = "<font color='red'>内容不允许为空！</font>";
}
return false; //为以后的综合验证准备
}
}
function changeColor(obj,color){ //负责改变表格显示颜色
obj.bgColor=color;
}
