码迷,mamicode.com
首页 > 其他好文 > 详细

自己写的一个表单验证类

时间:2015-08-18 16:06:27      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

表单验证类使用说明:

myvalidation类的使用说明:
目前实现功能:form表单的非空验证和手机号码验证
默认弹出提示框,提示框的内容
优先选择:input对应lable文本+"不能为空"
其次选择:input的placeholder字段
因此至少保证,上述至少有一种是想要的警告内容

使用方法:
1,jsp页面中引入myvalidation.js文件
2,删除一切jsp页面原提交按钮的onclick="xxx.submit();事件
3,form表单字段非空:对应字段加上class:required
4,form表单字段为电话号码格式,对应字段加上class: phoneNum
5,如果是通过form表单内部的type=submit按钮提交,步骤1后,无需其他改变
6,如果是通过form表单外其他按钮的click事件触发表单提价,经步骤1后,还需要为该按钮添加class: form-submit;data-form的值为对应表单的name属性

表单验证类源代码

function isNull(domElement){
    if(domElement==null||domElement==undefined||(domElement.trim&&domElement.trim()=="")){
        return true;
    }else{
        return false;
    }
}

function isPhoneNum(num){
    if(isNull(num)){
        return false;
    }
    // pattern=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
    var pattern= /^1\d{10}$/;
    if(pattern.test(num)){
        return true;
    }else{
        return false;
    }
}
 
// 验证单个表格,如果字段包含required类,则该字段不能为空,如果包含phoneNum类,则需要为电话号码
function isFormValid(formElement){
    if(isNull(formElement)){
        return false;
    }
    for(var i=0;i<formElement.elements.length;i++){
        var temp=formElement.elements[i];
        var content=temp.value;
        var classText=temp.getAttribute("class");
        if(isNull(classText)){
            continue;
        }
        if(classText.indexOf("required")!=-1){
            if(isNull(content)){
                var previousNode=temp.previousSibling.previousSibling;
                // 首先通过label来确定弹出什么样的
                if(!isNull(previousNode)&&(previousNode.nodeName=="LABEL"||prevousNode.nodeName=="label")){
                    alert(previousNode.firstChild.data+"不能为空!");
                    return false;
                }else{
                    var placeHolderText=temp.getAttribute("placeholder");
                    if(!isNull(placeHolderText)){
                        alert(placeHolderText);
                        return false;
                        }
                }                 
            }
        }else{
            if(classText.indexOf("phoneNum")!=-1){
                if(!isPhoneNum(temp.value)){
                    alert("手机号码格式不正确!");
                    return false;
                }
        }
            
        }
    }
    // 否则通过验证
    // formElement.submit();
    return true;
}
// 检测页面上的所有form,这种适合于通过form内的submit按钮提交类型
// 如果是通过form之外的按钮触发submit事件,这种方法是监听不到的
function checkAllPageForm(){
    var forms=document.forms;
    for(var i=0;i<forms.length;i++){
        var temp=forms[i];
        $(temp).submit(function(event){
            if(isFormValid(temp)){
                temp.submit();
            }else{
                if(event.preventDefault){
                    event.preventDefault();
                }else{
                    event.returnValue=false;
                }                
                 
            }
        });
        
    }
}

// 如果是通过form表单外的按钮提交,需要监听表单的click事件
//统一规则,为这类按钮添加统一类form-submit,同时添加data-form字段指向要提交表单的name属性
function checkPageFormSubmitByButton(){
    $btn_submit=$(".form-submit");
    if($btn_submit.length>0){
        $btn_submit.click(function(event){
            var form_name=this.getAttribute("data-form");
            if(!isNull(form_name)){
                var form=document.forms[form_name];
                if(isFormValid(form)){
                //    alert(isFormValid);
                    form.submit();
                }else{
                    if(event.preventDefault){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                }
            }
            
        });
    }
}
$(function(){
    checkAllPageForm();
    checkPageFormSubmitByButton();
});


 
 

 

自己写的一个表单验证类

标签:

原文地址:http://www.cnblogs.com/bobodeboke/p/4739496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!