正文

javascript：综合案例-表单验证

程序猿  程序猿  2022-08-02  501

关键词：

综合案例：表单验证

开发要求：
　　要求定义一个雇员信息的增加页面，例如页面名称为"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

表单验证提示插件validate

...input框！以下为表单验证案例代码：<script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript" src="jquer 查看详情

停止表单提交的 JavaScript 代码

】停止表单提交的JavaScript代码【英文标题】：JavaScriptcodetostopformsubmission【发布时间】：2012-01-2916:08:06【问题描述】：停止表单提交的一种方法是从JavaScript函数返回false。单击提交按钮时，将调用验证函数。我有一个表单验证案... 查看详情

停止表单提交的 JavaScript 代码

】停止表单提交的JavaScript代码【英文标题】：JavaScriptcodetostopformsubmission【发布时间】：2022-01-2208:47:51【问题描述】：停止表单提交的一种方法是从您的JavaScript函数中返回false。单击提交按钮时，将调用验证函数。我有一个表单... 查看详情

javascript：综合案例---房贷计算器的实现

房贷计算器的实现　　（可以使用的编辑器：webStrom、subLime、notePad++、editPlus）输入数据：　　平方单价　　 70,000.00元/平方　 B1　　租金　　　　382.50元/平方　　　 B2　　物业费　　　 50.50元/平方　　　　B3　　面... 查看详情

jquery应用实例5：表单验证

1.validation插件的使用：入门案例：<html><head><metacharset="UTF-8"><title>validate入门案例</title><scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><!--valid 查看详情

linuxcentos8（http综合案例-用户登录）(代码片段)

LinuxCentOS8（HTTP-用户登录）当服务器端希望客户端以特定的用户进行访问访问时，可以运用HTTP的用户登录功能。HTTP有四种对用户身份验证的方式，分别为BASIC认证，DIGEST认证，SSL客户端认证和Web表单认证。... 查看详情

linuxcentos8（http综合案例-用户登录）(代码片段)

jquery表单验证案例

目标：使用jQuery进行表单验证。功能：1.必填选项后面添加了红色小星星；　　　2.选中开始输入时，输入文本框会改变当前背景色，增强用户体验；　　　3.输入的时候就开始验证，当输入格式正确就会提醒，就是当前还停留在... 查看详情

javascript表单验证

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>表单验证</title><scripttype="text/javascript">functioncheckForm(){//表单验证//01.获取用户的输入varuserName=doc 查看详情

javascript第10章javascript表单验证

查看详情

Javascript 表单验证（编码新手）

】Javascript表单验证（编码新手）【英文标题】：JavascriptFormValidation(newtocoding)【发布时间】：2020-10-1112:54:30【问题描述】：我正在尝试使用javascript完成一些HTML表单验证，在我添加正则表达式匹配部分之前，一切正常。从那时起... 查看详情

学习react-简单小案例--综合案例

<html><head><title></title><metacharset="UTF-8"/><scriptsrc="js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/react-dom.min.js 查看详情

angularjs综合笔记案例

...达式书写的位置"输出"数据。AngularJS表达式很像 JavaScript表查看详情

用javascript进行表单验证

...将数据交到数据库存储供以后使用。也可以在客户机上用JavaScript进行表单验证，比较快，用户操作效率较高。虽然用JavaScript进行表单验证有很多优点，不过有些用户可能会关闭浏览器JavaScript功能或者不支持JavaSc 查看详情

jquery使用案例

表单验证Dom实现表单验证通过在form标签的submit上绑定一个onclick事件，用户点击事，触发这个事件，执行Checkvalid()函数进行对表单中的元素值验证，验证通过之后，继续让submit之行自己的事件，post表单内容到服务器，如果验证不... 查看详情

简单的session案例——一次性验证码

一次性验证码的主要目的就是为了限制人们利用工具软件来暴力猜测密码，其原理与利用Session防止表单重复提交的原理基本一样，只是将表单标识号变成了验证码的形式，并且要求用户将提示的验证码手工填写进一个表单字段... 查看详情

使用 JavaScript 多步骤表单进行联系表单验证

】使用JavaScript多步骤表单进行联系表单验证【英文标题】：contactformValidationwithJavaScriptmultistepform【发布时间】：2021-01-1403:18:18【问题描述】：我目前有一个使用JavaScript进行下一步的多步骤联系表单，但我需要添加输入验证，以... 查看详情

Javascript 验证后的表单提交

】Javascript验证后的表单提交【英文标题】：FormsubmissionafterJavascriptValidation【发布时间】：2015-12-0108:26:57【问题描述】：在使用JavaScript验证表单后，我想将表单提交到名为reg.php的PHP文件。HTML表格如下：HTML表单：<formmethod="post"&... 查看详情