表单验证--插件-1.0.1

1、html代码

<div class="reg">
        <form action="" method="post" id="regForm" name="regForm" onsubmit="return false;">
            <h1 class="reg-tit">10秒注册账号</h1>
            <p id="fv_content"></p>
            <ul class="clearfix">
                <li class="fl">
                    <label class="fl">游戏账号</label>
                    <input type="text" maxlength="16" value="" id="user_name" name="user_name" class="fl inp" autocomplete="off" tabindex="1" datatype="/^[a-z][a-z0-9]{5,15}$/" url="/do/check_default.php" error="6-16位小写字母或数字,首位为字母" />
                    <div id="user_nameTip" class="onShow">&nbsp;</div>
                </li>
                <li class="fl">
                    <label class="fl">登录密码</label>
                    <input type="password" value="" maxlength="16" id="user_pwd1" name="user_pwd1" class="fl inp" tabindex="2" datatype="/[a-z0-9]{8,16}/" error="8-16位字母或数字"/>
                    <div id="user_pwd1Tip" class="onShow">&nbsp;</div>
                </li>
                <li class="fl">
                    <label class="fl">真实姓名</label>
                    <input id="user_realname" class="fl inp" type="text" autocomplete="off" maxlength="4" name="user_realname" tabindex="3" datatype="/^([u4E00-u9FA5]+，?)+$/" error="请输入真实姓名"/>
                    <div id="user_realnameTip" class="onShow">&nbsp;</div>
                </li>
                <li class="fl">
                    <label class="fl">身份证号</label>
                    <input value="" maxlength="18" id="user_idcard" name="user_idcard" class="fl inp" tabindex="4" datatype="idcardVel" error="请输入身份证以保证合法"/>
                    <div id="user_idcardTip" class="onShow">&nbsp;</div>
                </li>
                <li class="fl">
                    <label class="fl">安全邮箱</label>
                    <input type="text" value="" maxlength="50"  id="user_email" name="user_email" class="fl inp" tabindex="5" datatype="emailVel" error="请输入正确邮箱"/>
                    <div id="user_emailTip" class="onShow">&nbsp;</div>
                </li>
                <li class="fl">
                    <label class="fl">验证码</label>
                    <input type="text" name="user_checkcode" id="user_checkcode" maxlength="4" class="fl inp" tabindex="6"/>
                    <img id="id_randimage" alt="看不清？重新换张！" class="fl" style="display:none;"/>
                </li>
            </ul>
            <p class="reg-agree"><input id="check_agree" type="checkbox" name="check_agree" checked="checked"/>&nbsp;查看并同意<a href="" target="_blank">《服务协议与隐私声明》</a></p>
            <input type="submit" name="regsubmit" id="regsubmit" class="block public reg-submit" value="" title="立即注册"/>
            <input type="hidden" value="ajax" id="submitType" name="submitType" /> 
            <input type="hidden" name="act_id" id="act_id" value="11111111111"/>
            <button id="xsubmit" value="/do/reg_server_j.php" style="display:none"></button>
        </form>
    </div>
    <div class="reg-ok hide">
        <h1 class="reg-tit">注册成功</h1>
        <div class="public reg-ok-pic"></div>
        <h2>登录游戏 领取588大礼包</h2>
    </div>

2、js验证代码

<script src="js/jquery.min.js"></script>
<script>
var forms = {'id': 'regForm'};
function afterSubmit(result){
    var data=eval('('+result+')');
    $('#regSubmit').attr('disabled', false);
    if(data.status == 1){
        $('.reg').hide();
        $('.reg-ok').show();
    }else{
        alert(data.msg);
        $('#user_checkcode').val('');
        regFormCon.getNewCode();
        return false;
    }
}
$(function(){
    var regFormCon = {
        flag:true,
        checkCode:$('#user_checkcode'),
        forms:$('#regForm'),
        submit_btn:$('#regsubmit'),
        tip:$('#fv_content'),
        checkImg:$('#id_randimage'),
        regAgree:$('#check_agree'),
        xsubmit:$('#xsubmit'),
        velInput:[],
        velInFun:[],
        val_l:[],
        checkCodebind:function(){
            this.checkCode.focus(function(){
                if(regFormCon.flag){
                    regFormCon.checkImg.attr('src','/inc/validatecode.php?rnd=' + Math.random()).show();
                    regFormCon.flag = false;
                }else{
                    return;
                }
            });
        },
        emailVel:function(val){
            var pattern = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
            if(pattern.test(val)){
                return true;
            }
            return false;
        },
        getNewCode:function(){
            regFormCon.checkImg.attr('src', '/inc/validatecode.php?rnd=' + Math.random());
            return false;
        },
        idcardVel:function(b) {
            if (b.length == 15) {
                if (this.isValidityBrithBy15IdCard(b)) {
                    if (this.getAgeByIdcard(b)) {
                        alert("您属于未满18周岁的未成年人，无法注册");
                        return false;
                    }
                    return true;
                }
                return false;
            } else {
                if (b.length == 18) {
                    var a = b.split("");
                    if (this.isValidityBrithBy18IdCard(b) && this.isTrueValidateCodeBy18IdCard(a)) {
                        if (this.getAgeByIdcard(b)) {
                            alert("您属于未满18周岁的未成年人，无法注册");
                            return false;
                        }
                        return true;
                    }
                    return false;
                }
            }
            return false;
        },
        isTrueValidateCodeBy18IdCard: function(b) {
            var c = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];
            var a = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
            var e = 0;
            if (b[17].toLowerCase() == "x") {
                b[17] = 10;
            }
            for (var d = 0; d < 17; d++) {
                e += c[d] * b[d];
            }
            valCodePosition = e % 11;
            if (b[17] == a[valCodePosition]) {
                return true;
            }
            return false;
        },
        isValidityBrithBy18IdCard: function(b) {
            var d = b.substring(6, 10);
            var e = b.substring(10, 12);
            var a = b.substring(12, 14);
            var c = new Date(d,parseFloat(e) - 1,parseFloat(a));
            if (c.getFullYear() != parseFloat(d) || c.getMonth() != parseFloat(e) - 1 || c.getDate() != parseFloat(a)) {
                return false;
            }
            return true;
        },
        isValidityBrithBy15IdCard: function(d) {
            var c = d.substring(6, 8);
            var e = d.substring(8, 10);
            var a = d.substring(10, 12);
            var b = new Date(c,parseFloat(e) - 1,parseFloat(a));
            if (b.getYear() != parseFloat(c) || b.getMonth() != parseFloat(e) - 1 || b.getDate() != parseFloat(a)) {
                return false;
            }
            return true;
        },
        getAgeByIdcard: function(b) {
            var f = new Date();
            var e = b.length == 18 ? b.slice(6, 10) : 1900 + parseInt(b.slice(6, 8));
            e = parseInt(e) + 18;
            var g = b.length == 18 ? b.slice(10, 12) : b.slice(8, 10);
            var c = b.length == 18 ? b.slice(12, 14) : b.slice(10, 12);
            var a = e + "/" + g + "/" + c;
            if (Date.parse(f) - Date.parse(a) == 0) {
                return false;
            }
            if (Date.parse(f) - Date.parse(a) < 0) {
                return true;
            }
            if (Date.parse(f) - Date.parse(a) > 0) {
                return false;
            }
            return true;
        },
        filterInput:function(){
            var fliterIn = this.forms.find('input');
            var _l = this.forms.find('input').length;
            for(var i=0;i<_l;i++){    
                if(!!fliterIn.eq(i).attr('datatype')){
                    fliterIn.eq(i).attr('issubmit','0');
                    this.val_l.push(fliterIn.eq(i));
                    if(!//.+//.test(fliterIn.eq(i).attr('datatype'))){
                        this.velInFun.push(fliterIn.eq(i));
                        continue;
                    }
                    this.velInput.push(fliterIn.eq(i));
                }
            }
        },
        funcVel:function(){
            if(this.velInFun){
                for(var i = 0; i < this.velInFun.length; i++){
                    this.velInFun[i].bind('blur',function(){
                        var _this = $(this);
                        var datatype = _this.attr('datatype').toString();
                        var value = _this.val();
                        if(regFormCon[datatype](value)){
                            _this.attr('issubmit','1');
                            _this.next().addClass('onCorrect').removeClass('onError');
                            regFormCon.tip.text('');
                        }else{
                            _this.next().addClass('onError').removeClass('onCorrect');
                            regFormCon.tip.text(_this.attr('error'));
                        }
                    });
                    this.velInFun[i].bind('focus',function(){
                        var _this = $(this);
                        var value = _this.val();
                        regFormCon.tip.text(_this.attr('error'));
                    });
                }
            }
        },
        normalVel:function(){
            if(this.velInput){
                for(var i = 0; i < this.velInput.length; i++){
                    this.velInput[i].bind('blur',function(){
                        var datatype = eval($(this).attr('datatype'));
                        var url = $(this).attr('url');
                        var value = $(this).val();
                        var pattern = new RegExp(datatype);
                        var _this = $(this);
                        if(pattern.test(value)){
                            if(!!url){
                                $.ajax({
                                   type: "GET",
                                   url: url,
                                   async:false,
                                   data: 'clientid='+_this.attr('id')+'&user_name=' + value +'&_='+ new Date().getTime(),
                                   error:function(){
                                        _this.next().addClass('onError').removeClass('onCorrect');
                                        regFormCon.tip.text(_this.attr('error'));
                                        return false;
                                   },
                                   success: function(msg){
                                     if(msg == 1){
                                        _this.attr('issubmit','1');
                                        _this.next().addClass('onCorrect').removeClass('onError');
                                        regFormCon.tip.text('');
                                     }else{
                                        _this.next().addClass('onError').removeClass('onCorrect');
                                        regFormCon.tip.text(_this.attr('error'));
                                        return false;
                                     }
                                   }
                                });
                            }else{
                                _this.next().addClass('onCorrect').removeClass('onError');
                                regFormCon.tip.text('');
                                _this.attr('issubmit','1');
                            }
                        }else{
                            _this.next().addClass('onError').removeClass('onCorrect');
                            regFormCon.tip.text(_this.attr('error'));
                            return false;
                        }
                    });
                    this.velInput[i].bind('focus',function(){
                        var _this = $(this);
                        var value = _this.val();
                        regFormCon.tip.text(_this.attr('error'));
                    });
                }
            }
        },
        submit:function(){
            var focusF = true;
            for(var i = 0;i < regFormCon.val_l.length;i++){
                if(regFormCon.val_l[i].attr('issubmit') == '1'){
                    regFormCon.val_l[i].next().addClass('onCorrect').removeClass('onError');
                    this.tip.text('');
                    continue;
                }else{
                    regFormCon.val_l[i].next().addClass('onError').removeClass('onCorrect');
                    if(focusF){
　　　　　　　　　　　　　　this.tip.text(regFormCon.val_l[i].attr('error'));
                        regFormCon.val_l[i].focus();
                        focusF = false;
                    }
                    if(i == regFormCon.val_l.length-1){
                        return false;
                    }
                }
            }
            if(this.checkCode.val() == '' || this.checkCode.val().length < 4){
                this.tip.text('验证码格式不正确！');
                this.checkCode.focus();
                this.getNewCode();
                return false;
            }
            if(!(this.regAgree.attr('checked'))){
              alert('您必须同意该协议才能继续注册');
              this.getNewCode();
              return false;
            }
            return true;
        },
        init:function(){
            var _this = this;
            _this.checkCodebind();
            _this.filterInput();
            _this.funcVel();
            _this.normalVel();
            regFormCon.checkImg.click(function(){
                _this.getNewCode();
            });
            _this.submit_btn.click(function(){
                if(_this.submit()){
                    _this.xsubmit.get(0).click();
                }
            });
        }
    };
    regFormCon.init();
});
</script>
<script src="/webtool/webtool.nocache.js"></script>