JavaScript:表单验证模型-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JavaScript:表单验证模型

简介:

 之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示。如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示。其实,一般的数据验证无非就是那么几种,例如:

  大多数的语言,在实际开发中都具有封装性的特点。那么为了保证验证的完整性,应该有一个专门的工具文件—utlity.js文件,实际上是也就是建立一个表单验证模型,模型化操作。一般的验证提示规划格式如下:

 例如表单代码格式:

   <form action="pass.html" method="post" id="loginForm">

      <!--在以后的开发过程之中,必须要保证id与name属性内容完全一致,否则会出现怪异问题-->

      用&nbsp;户&nbsp;名:<input type="text" name="uid" id="uid" class="init"></input><span id="uidSpan"></span><br>

      初始密码:<input type="text" name="password" id="password" class="init"></input><span id="passwordSpan"></span><br>

      确认密码:<input type="text" name="conf" id="conf" class="init"></input><span id="confSpan"></span><br>

      <button type="submit" id="subBtn">登录</button>

      <button type="reset" id="restBtn">重置</button>

   </form>

 

好了,这些表单的id设置好了后,我们只需要在utlity.js工具文件中进行数据的验证。那么如何调用这个工具来进行验证呢?即流程大致如下:

对于验证而言,往往是发生在一个组件失去焦点后,表单样式发生改变。失去焦点为”onblur”事件,而获得焦点为“onfocus”。

完整的范例代码如下:

表单通过提示文件:pass.html

复制代码
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content=event.html"">
        <meta name="keywords" content="event,html,js">
    <body>
        <h1>表单验证通过!</h1>
    </body>
</html>
复制代码

表单文件:form.html

复制代码
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content=event.html"">
        <meta name="keywords" content="event,html,js">
        <title>javascript的程序开发之表单提交事件处理</title>
        
        <link rel="stylesheet" type="text/css" href="form.css">  //导入样式文件
        <script type="text/javascript" src="utlity.js"></script> //导入工具文件
        <script type="text/javascript" src="vform.js"></script> //导入表单操作文件

    </head>
    <body>
        <form action="pass.html" method="post" id="loginForm">
            <!--在以后的开发过程之中,必须要保证id与name属性内容完全一致,否则会出现怪异问题-->&nbsp;&nbsp;名:<input type="text" name="uid" id="uid" class="init"></input><span id="uidSpan"></span><br>
            初始密码:<input type="text" name="password" id="password" class="init"></input><span id="passwordSpan"></span><br>
            确认密码:<input type="text" name="conf" id="conf" class="init"></input><span id="confSpan"></span><br>
            <button type="submit" id="subBtn">登录</button>
            <button type="reset" id="restBtn">重置</button>
        </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;
}
复制代码

表单提交操作文件,动态绑定事件处理:vfrom.js

复制代码
window.onload = function(){  //在页面加载之后动态事件绑定
    document.getElementById("uid").addEventListener('blur',function(){
        validateUid();
    },false);
    
    document.getElementById("password").addEventListener('blur',function(){
        validatePassword();
    },false);
    
    document.getElementById("conf").addEventListener('blur',function(){
        validateConf();
    },false);
    
    
    document.getElementById('loginForm').addEventListener('submit',function(e){ //e是提交事件
        if( validateUid() && validatePassword() && validateConf()){ //可以提交
            this.submit();
        }else{ 
            formStop(e); //传入事件
        }
    },false);
}

function validateUid(){  //专门验证uid数据
    // return validateEmpty("uid");  //空的验证
     return validateEmail("uid");  //邮箱的验证
    // return validateNumber("uid");    //数字的验证
}

function validatePassword(){  //专门验证password数据
    return validateEmpty("password"); //传入元素名称
}


function validateConf(){
    return validateRepeat("password","conf");//传入原密码和确实密码的id
}

/**
 它负责表单在出现问题时进行提交
*/
function formStop(e){
    if (e && e.preventDefault) { //现在是在W3C标准下执行
        e.preventDefault(); //阻止浏览器的动作
    }else{  //专门针对于IE浏览器的处理
        window.event.returnValue= false;
    }
}
复制代码

表单提交操作的工具文件:utility.js

复制代码
/**    
    本文件是一个JS工具文件,里面提供有一系列的属性、函数、类。
*/

/**
    本方法主要验证指定的元素的内容是否为空
*/
function validateEmpty(eleId){
    var obj = document.getElementById(eleId);//取得一个表单元素
    if(obj != undefined){
        if(obj.value == ""){  //数据错误
            setFailureStyle(obj);
            return false; //表示验证失败
        }else{
            setSuccessStyle(obj);
            return true; //验证成功
        }     
    }
    return false;
}

/**
    本方法主要验证指定的元素的内容进行正则验证
*/
function validateRegex(eleId,regex){ //从外部传入正则
    if(validateEmpty(eleId)){  //进行是否为空的验证
        var obj = document.getElementById(eleId);//取得一个表单元素
        if(!regex.test(obj.value)){  //数据错误
            setFailureStyle(obj);
            return false; //表示验证失败
        }else{
            setSuccessStyle(obj);
            return true; //验证成功
        }     
    }
    return false;
}

/**
    在正则的基础上验证邮箱
*/
function validateEmail(eleId){
    return validateRegex(eleId,/^\w+@\w+\.\w+$/);
}

/**
    验证是否全部是数字
*/
function validateNumber(eleId){
    return validateRegex(eleId,/^\d+(\.\d)?$/);
}

/**
    验证确认密码
*/
function validateRepeat(srcId,distId){ //初始密码的id,确认密码的id
    if(validateEmpty(srcId) && validateEmpty(distId)){
        var srcObj = document.getElementById(srcId);
        var distObj = document.getElementById(distId);
        if(srcObj.value != distObj.value){ //失败
            setFailureStyle(distObj);
            return false; //表示验证失败
        }else{ //成功
            setSuccessStyle(distObj);
            return true; //验证成功
        }
    }
    return false;
}

/**
    设置错误的样式
*/
function setFailureStyle(obj){
    
    obj.className = "failure"; //设置错误的样式
    var spanObj = document.getElementById(obj.id+"Span"); //取得提示信息元素
    if(spanObj != null){
        spanObj.innerHTML = "<font color='red'>×</font>";
    }
}

/**
    设置正确的样式
*/
function setSuccessStyle(obj){
    
    obj.className = "success"; //设置正确的样式
    var spanObj = document.getElementById(obj.id+"Span"); //取得提示信息元素
    if(spanObj != null){
        spanObj.innerHTML = "<font color='green'>√</font>";
    }
}
复制代码

 

效果截图如下:

表单默认状态样式:

任意数据为空时样式 :

用户名为邮箱格式正确时样式:

初始密码和确认密码不一致时样式:

用户名为邮箱格式正确、初始密码和确认密码一致时样式:

最后提交表单成功:

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5829696.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章