综合案例：表单验证

开发要求：
　　要求定义一个雇员信息的增加页面，例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单，此表单定义要求如下:
　　　　.雇员编号：必须是4位数字，按照正则进行验证；
　　　　.雇员姓名：不能为空；
　　　　.雇员职位：不能为空；
　　　　.雇员日期：按照"yyyy-mm-dd"的格式编写，按照正则进行验证；
　　　　.基本工资：按照小数编写，小数为最多2位，按照正则进行验证；
　　　　.佣金：难找小数编写，小数位数最多2位，按照正则进行验证。

具体步骤：
　　第一：定义表单
　　　　.将form.css文件拷贝到css目录之中；
　　　　.将emp_add.html页面之中编写表单，以及导入form.css文件的引用；

第二：页面动态效果
　　1、为表格增加一些显示的过渡效果
　　　　.可以建立一个工具类文件util.js，难么在文件中提供有表格改变的处理函数；
　　　　.既然现在是在emp_add.html文件进行处理，所以应该准备js/emp_add.js文件；
　　　　.在emp_add.html文件中导入uitl.js与emp_add.js文件;
　　　　.动态设置显示的效果，增加mouseover和mouseout事件，在表格行元素中增加。

　　2、考虑到代码的可重用性问题，所以建议将具体的验证交给util.js来完成。
　　　　.建立validateEmpty()、validateRegex()、validateNumber()、validateDate()；
　　　　.建立完一个函数之后一定要对这个函数的可用性进行测试；
　　　　.在emp_add.js文件里面动态绑定事件，使用的还是“onblur”事件;

　　3、分别绑定完事件处理之后，下面针对于表单进行事件的处理。

第三：使用日期选择组件
　　对于日期的控制需要注意一个问题：正则只能够针对于日期的格式进行判断，但是无法对内容进行验证，而且日期这一操作，不应该让用户随意输入，最好的一个做法是由用户自己选择，也即使用日期组件直接选取日期，这个可以直接去网上下载将代码拷贝过来即可使用。

例如 My97DatePicker日期组件： http://files.cnblogs.com/files/XYQ-208910/My97DatePickerBeta.zip

具体代码如下：

emp_add.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="description" content="verfify form!">

    <meta name="keywords" content="javascript,html,css">

    <link rel="stylesheet" type="text/css" href="css/form.css">

    <script type="text/javascript" src="js/util.js"> </script>

    <script type="text/javascript" src="js/emp_add.js"> </script>

    <script type="text/javascript" src="My97DatePicker/WdatePicker.js"> </script>

    <title>雇员管理程序</title>

</head>

<body>

    <form action="" id="empForm">

        <table cellpadding="1" cellspacing="1" border="1" bgcolor="F2F2F2" width="100%">

            <tr id="empTr">

                <td colspan="3">增加雇员信息</td>

            </tr>

            <tr id="empTr">

                <td width="10%">雇员编号：</td>

                <td width="60%"><input type="text" name="empNo" id="empNo" class="init"></td>

                <td width="30%"><span id="empNoSpan"></span></td>

            </tr>

            <tr id="empTr">

                <td width="10%">雇员姓名：</td>

                <td width="60%"><input type="text" name="empName" id="empName" class="init"></td>

                <td width="30%"><span id="empNameSpan"></span></td>

            </tr>

            <tr id="empTr">

                <td width="10%">雇员职位：</td>

                <td width="60%"><input type="text" name="empJob" id="empJob" class="init"></td>

                <td width="30%"><span id="empJobSpan"></span></td>

            </tr>

            <tr id="empTr">

                <td width="10%">雇员日期：</td>

                <td width="60%"><input type="text"  onClick="WdatePicker()" name="empDate" id="empDate" class="init" readonly="readonly"></td>

                <td width="30%"><span id="empDateSpan"></span></td>

            </tr>

            <tr id="empTr">

                <td width="10%">基本工资：</td>

                <td width="60%"><input type="text" name="empSal" id="empSal" class="init"></td>

                <td width="30%"><span id="empSalSpan"></span></td>

            </tr>

            <tr id="empTr">

                <td width="10%">佣金：</td>

                <td width="60%"><input type="text" name="empCom" id="empCom" class="init"></td>

                <td width="30%"><span id="empComSpan"></span></td>

            </tr>

            <tr id="empTr">

                <td colspan="3">

                    <input type="submit" value="增加">

                    <input type="reset" value="重置">

                </td>

            </tr>

        </table>

    </form>

</body>

</html>>

form.css

/*成功*/

.success{

    background:#f5f5f5;

    font-weight:bold;

    color:#000000;

    border:solid 1px #009900; /*边框为绿色*/

}

/*失败*/

.failure{

    background:#f5f5f5;

    font-weight:bold;

    color:#000000;

    border:solid 1px #990000; /*边框为红色*/

}

/*初始化*/

.init{

    background:#f5f5f5;

    font-weight:bold;

    color:#000000;

}

emp_add.js

window.onload = function(){

    //1、为表格的行增加动态效果

    var trObj = eleAll("empTr");

    for (var i = 0; i < trObj.length; i++) {

        bindEvent("mouseover",trObj[i],function(){

            changeColor(this,'FFFFFF');

        });

        bindEvent("mouseout",trObj[i],function(){

            changeColor(this,'F2F2F2');

        });

    }

    //2、设置验证事件

    bindEvent("blur",ele("empNo"),function(){

        validateEmpNo();

    });

    bindEvent("blur",ele("empName"),function(){

        validateEmpName();

    });

    bindEvent("blur",ele("empJob"),function(){

        validateEmpJob();

    });

    bindEvent("blur",ele("empDate"),function(){

        validateEmpDate();

    });

    bindEvent("blur",ele("empSal"),function(){

        validateEmpSal();

    });

    bindEvent("blur",ele("empCom"),function(){

        validateEmpCom();

    });

    //3、处理表单的绑定

    bindEvent("submit",ele("empForm"),function(e){

        if (validateForm()) {

            this.submit(); //提交表单

        }else{

            if(e && e.preventDefault){ //现在是在W3C标准下执行

                e.preventDefault(); //阻止浏览器的执行

            }else{ //专门针对于IE浏览器的处理

                window.event.returValue = false;

            }

        }

    });

}

//验证雇员编号

function validateEmpNo(){

    return validateRegex("empNo",/^\d{4}$/);

}

//验证雇员姓名

function validateEmpName(){

    return validateEmpty("empName");

}

//验证雇员职位

function validateEmpJob(){

    return validateEmpty("empJob");

}

//验证雇佣日期

function validateEmpDate(){

    return validateDate("empDate");

}

//验证基本工资

function validateEmpSal(){

    return validateSal("empSal");

}

//验证佣金

function validateEmpCom(){

    return validateCom("empCom");

}

//表单事件

function validateForm(){

    return validateEmpNo() && validateEmpName() && validateEmpJob() && validateEmpDate() && validateEmpSal() && validateEmpCom();

}

util.js

//改变颜色

function changeColor(obj,color) {

    if (obj != undefined) {

        obj.bgColor = color;

    };

}

//获取HTML元素

function ele(eleID) {

    return document.getElementById(eleID);

}

function eleAll(eleID) {

    return document.all(eleID);

}

//为HTML元素动态绑定事件

function bindEvent(eventType,obj,fun) {

    obj.addEventListener(eventType,fun,false);

}

//建立validateNumber()方法进行数字验证

function validateNumber(eleID) {

    return validateRegex(eleID,/^\d+(\.\d+)?$/);

}

//建立validateDate()方法进、进行日期验证

function validateDate(eleID) {

    return validateRegex(eleID,/^\d{4}-\d{2}-\d{2}$/);

}

//建立validateSal()方法基本工资验证

function validateSal(eleID) {

    return validateRegex(eleID,/^\d{1,5}(\.\d{1,2})?$/);

}

//建立validateCom()方法基本佣金验证

function validateCom(eleID) {

    return validateRegex(eleID,/^\d{1,5}(\.\d{1,2})?$/);

}

//建立validateEmpty()方法验证数据是否为空

function validateEmpty(eleID) {

    var obj = ele(eleID);//取得指定名称的对象

    if (obj != null) {

        if (obj.value == "") {  //数据验证出错

            setFailureStyle(obj);

            return false;

        }else{   //数据验证成功

            setSuccessStyle(obj);

            return true;

        }

    }

    return false;

}

//建立validateRegex()方法进行正则的验证

function validateRegex(eleID,regex) {

    var obj = ele(eleID);//取得指定名称的对象

    if (validateEmpty(eleID)) {  //有数据

        if (!regex.test(obj.value)) { //没有通过

            setFailureStyle(obj);

            return false;

        }else{ //数据验证成功

            setSuccessStyle(obj);

            return true;

        }

    }

}

//设置成功时的样式与信息提示

function setSuccessStyle(obj) {

    if (obj != null) {

        obj.className = "success";

        var spanObj = ele(obj.id + "Span");

        if (spanObj != null) { //给出了提示元素位置

            spanObj.innerHTML = "<font color='green'>√</font>";

        }

    }

}

//设置失败时的样式与信息提示

function setFailureStyle(obj) {

    if (obj != null) {

        obj.className = "failure";

        var spanObj = ele(obj.id + "Span");

        if (spanObj != null) { //给出了提示元素位置

            spanObj.innerHTML = "<font color='red'>×</font>";

        }

    }

}

效果图如下：

默认时：

信息全为空时，验证不通过：

信息任意一个为空时，验证不通过：

信息都不为空且符合格式时，验证全通过：

选取日期时：

完整代码下载：

CnBolog：http://files.cnblogs.com/files/XYQ-208910/Form_Authentication.zip

Github： https://github.com/xiayuanquan/Form_Authentication

JavaScript：综合案例-表单验证的更多相关文章

  1. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  2. javascript简单的表单验证

    <html> <head> <title>用户登录</title> <script language="javascript" ...

  3. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  4. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  5. FormValidator表单验证

    所需的库文件 红色框内是所需要的JavaScript库文件. <%@ page language="java" contentType="text/html; ch ...

  6. 登陆jq表单验证及jqcookie记住密码实例

    <p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...

  7. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  8. JavaScript—— 案例：表单验证

    QQ号:<input type="text" id="txtQQ"><span></span><br> 邮箱:& ...

  9. HTML5表单验证（4个实用的表单美化案例）

    multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form en ...

随机推荐

  1. 微信企业号办公系统-JSSDK上传图片（多图上传）

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  2. Range of int, long, 和 long long 的数值范围

    unsigned   int   0-4294967295   int   -2147483648-2147483647 unsigned long 0-4294967295 long   -2147 ...

  3. 应用服务器上部署自己的 blog 和 wiki 组件。

    协作性应用程序 这就是 Web 2.0 的全部,尽管该术语出现才几乎一年的时间,但现在好像只有烹饪杂志还没有加入到讨论 Web 2.0 未来出路的行列中.自从出现了里程碑式的文章 "What ...

  4. TCP和UDP的135、137、138、139、445端口的作用

    如果全是2000以上的系统,可以关闭137.138.139,只保留445 如果有xp系统,可能以上四个端口全部要打开 无论你的服务器中安装的是Windows 2000 Server,还是Windows ...

  5. HashTable的典型用法以及参考实例

    Get-ADComputer -Identity "cnhzpd-f7sc83x" | select -property @{name="computername&quo ...

  6. 强、软、弱、虚引用,ReferenceQueue,WeakHashMap

    强引用(Reference):所谓强引用就是普通引用.普通引用引用的对象,即使内存不足时,一般情况下也不会被回收. 软引用(weakReference):如果对象被且仅被软引用所引用时,内存不足时,会 ...

  7. 10. 求N分之一序列前N项和

    求N分之一序列前N项和 #include <stdio.h> int main() { int i, n; double item, sum; while (scanf("%d& ...

  8. mysql字段额外属性，除去字段类型外的其他属性

    如果你不想字段为 NULL 可以设置字段的属性为 NOT NULL, 在操作数据库时如果输入该字段的数据为NULL ,就会报错. AUTO_INCREMENT定义列为自增的属性,一般用于主键,数值会自 ...

  9. CC2540 USB Dongle 使用说明

    CC2540做的USB Dongle可以烧写不同的固件从而做很多PC端的应用,下面我们来介绍下下载固件的方法和一些典型应用: 下载接口: 3V3引脚连接到CC Debugger的Target Volt ...

  10. Chart控件，把Y轴设置成百分比

    这次所有属性设置都用代码(就当整理便于以后查询). 在窗体放置一个Chart控件,未做任何设置:然后编写代码: //设置 chart2.Legends[ ].Enabled = false;//不显示 ...