表单验证

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration:none;}
        i{font-weight:bold;font-style:normal;}

        .blue{color:#4095ce;}
        .red{color:#f00;}

        .w100{width:100px;}
        .w190{width:190px;}
        .w250{width:250px;}
        .w355{width:355px;}
        .form_main{
            padding:10px;
            margin:50px auto;
            width:630px;
            height:auto;
            border:1px solid #f4f4f4;
            overflow:hidden;
        }
        .row{
            padding:15px 0;
            border-bottom:1px solid #f4f4f4;
        }
        .row input[type=text]:focus,.row input[type=password]:focus{
            border:1px solid #ffd020;            
            outline:none;
            width:250px;
        }
        .row select:focus{
            border:1px solid #ffd020;            
            outline:none;
        }
        .row label{
            display:inline-block;
            padding-right:10px;
            text-align:right;
            vertical-align:middle;
        }
        .row .input_type{
            display:inline-block;
            padding:10px 5px;
            vertical-align:middle;
            border:1px solid #abadb3;
            -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
            -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
            transition:border .2s linear .1s,width .2s linear .1s;
        }
        .row .input_type.cor{
            border:1px solid #a6ce38;
        }
        .row .input_type.err{
            border:1px solid #f00;
        }
        .row .radio_type{
            display:inline-block;
            margin-right:5px;
            vertical-align:middle;
        }
        .row .select_type{
            vertical-align:middle;
            transition:border .2s linear .1s,width .2s linear .1s;
        }
        .row .select_type.cor{
            border:1px solid #f00;
        }
        .row .select_type.err{
            border:1px solid #f00;
        }
        .row .checkbox_type{
            vertical-align:middle;
        }
        .row .textarea_type{
            position:relative;
            padding:5px 0;
            height:100px;
            display:inline-block;
            vertical-align:middle;
            border:1px solid #abadb3;
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
        }
        .row .intextarea{
            display:inline-block;
            float:left;
            margin-left:7px;
            padding:5px;
            width:330px;
            height:70px;
            text-indent:20px;
            line-height:20px;
            text-align:justify;
            border:0;
            resize:none;
            outline:none;
            overflow-y:hidden;
            overflow:hidden;
        }
        .row .textarea_type:hover{
            border:1px solid #ffd020;         
        }
        .row .word_msg{
            position:absolute;
            right:5px;
            bottom:3px;
            font-size:13px;
            color:#999;
        }
        .row .argee_text{
            font-size:14px;
            color:#999;
        }
        .row .regBtn{
            width:120px;
            height:40px;
            line-height:40px;
            font-size:16px;
            font-family:'Microsoft YaHei';
            text-align:center;
            border-radius:5px;
            color:#a33300;
            background:#ffd020;
            background:-webkit-linear-gradient(top,#ffd020,#ffc313);
            border:1px solid #e79f14;
            cursor:pointer;
        }
        .row .regBtn:hover{
            background:#ffda59;
            background:-webkit-linear-gradient(top,#ffda59,#ffc806);
        }
            .row .regBtn:active {
                 border:1px solid #e79f14;
                 color:#e44700;
                 background:#ffd020;
            }
        .row span{
            display:inline-block;
            margin-left:10px;
            vertical-align:middle;
            font-size:12px;
            color:#4095ce;
        }
        .row span.err{
            color:#f00;
        }
        .row span.cor{
            color:#a6ce38;
        }
    </style>
</head>
<body>
    <div class="form_main">
        <form action="http://www.baidu.com" method="post" id="form" target="_blank">
            <div class="row">
                <label for="username" class="w100">用户名</label>
                <input type="text" class="input_type w190" id="username" must="true" />
            </div>
            <div class="row">
                <label for="password" class="w100">密码</label>
                <input type="password" class="input_type w190" id="password" must="true" />
            </div>
            <div class="row">
                <label for="repassword" class="w100">确认密码</label>
                <input type="password" class="input_type w190" id="repassword" must="true" />
            </div>
            <div class="row">
                <label for="email" class="w100">电子邮箱</label>
                <input type="text" class="input_type w250" id="email" must="true" />
            </div>
            <div class="row">
                <label for="info" class="w100">个人简介</label><span class="w355 textarea_type" id="textarea_type">
                    <textarea id="info" class="intextarea" autocomplete="off" must="true" ></textarea>
                    <div class="word_msg" id="word_msg">还可以输入<i>100</i>字</div>
                </span>
            </div>
            <div class="row">
                <label for="" class="w100">性别</label>
                <input type="radio" class="radio_type" id="man" name="sex" checked="checked" /><label for="man">男</label>
                <input type="radio" class="radio_type" id="woman" name="sex" /><label for="woman">女</label>
            </div>
            <div class="row">
                <label for="job" class="w100">职业</label>
                <select class="select_type" id="job" must="true">
                    <option value="0" selected="selected">选择职业</option>
                    <option value="1">平面设计师</option>
                    <option value="2">绘画/插画师</option>
                    <option value="3">三维/动画师</option>
                    <option value="4">网页设计师</option>
                    <option value="5">网页制作</option>
                    <option value="6">GUI设计师</option>
                    <option value="7">Flash动画师</option>
                    <option value="8">产品设计师</option>
                </select>
            </div>
            <div class="row" style="display:none;">
                <label>现居</label>
                <select class="select_type">
                    <option value="0" selected="selected">选择省份</option>
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">天津</option>
                    <option value="4">重庆</option>
                    <option value="5">黑龙江</option>
                    <option value="6">辽宁</option>
                    <option value="7">吉林</option>
                    <option value="8">河北</option>
                    <option value="9">内蒙古</option>
                    <option value="10">陕西</option>
                    <option value="11">山西</option>
                    <option value="12">甘肃</option>
                    <option value="13">宁夏</option>
                    <option value="14">新疆</option>
                    <option value="15">西藏</option>
                    <option value="16">青海</option>
                    <option value="17">四川</option>
                    <option value="18">云南</option>
                    <option value="19">贵州</option>
                    <option value="20">湖南</option>
                    <option value="21">湖北</option>
                    <option value="22">河南</option>
                    <option value="23">山东</option>
                    <option value="24">安徽</option>
                    <option value="25">江苏</option>
                    <option value="26">浙江</option>
                    <option value="27">台湾</option>
                    <option value="28">香港</option>
                    <option value="29">澳门</option>
                    <option value="30">广东</option>
                    <option value="31">广西</option>
                    <option value="32">江西</option>
                    <option value="33">福建</option>
                    <option value="34">海南</option>
                    <option value="35">其它</option>
                    <option value="36">美国</option>
                    <option value="37">欧洲</option>
                    <option value="38">日本</option>
                    <option value="39">韩国</option>
                    <option value="40">新加坡</option>
                    <option value="41">加拿大</option>
                    <option value="42">亚 洲</option>
                    <option value="43">非 洲</option>
                    <option value="44">澳 洲</option>
                    <option value="45">南美洲</option>
                    <option value="46">东南亚</option>
                </select>
            </div>
            <div class="row">
                <label class="w100"></label>
                <input type="checkbox" name="checkbox" class="checkbox_type" id="agree_checkbox" must="true" />
                <label class="argee_text" for="agree_checkbox">我已阅读并接受 <a href="" class="blue">版权声明</a> 和 <a href="" class="blue">隐私保护</a> 条款</label>
            </div>
            <div class="row">
                <label class="w100"></label>
                <input type="submit" value="免费注册" class="regBtn" id="regBtn" />
            </div>
        </form>
    </div>
    <script>
        window.onload = function () {            
            var oForm = document.getElementById('form'),
                inputText1 = document.getElementById('username'),
                passwordID = document.getElementById('password'),
                repasswordID = document.getElementById('repassword'),
                emailID = document.getElementById('email'),
                selectID = document.getElementById('job'),
                oAgree_checkbox = document.getElementById('agree_checkbox'),
                oTextarea_box = document.getElementById('textarea_type'),
                oInfo = document.getElementById('info'),
                oWord_msg = document.getElementById('word_msg');
            /*
                调用方法:
                HTML: <input type="" must="true" /> 加了must="true"为需要验证的项 
                JS:
                    var checkForm = new Check_form();
                    checkForm.init({
                        formID: formID,     //表单的id(必填)
                        text_msg: [],       //验证信息提示,(必填),         例:text_msg: ['4-16个字符,字母/中文/数字/下划线。', '4-16个字符,区分大小写。']
                        err_text: [],       //验证错误时的信息提示(必填),   例:text_msg: ['您输入的用户名不符合要求,请检查。', '密码不能为空请重新输入。']
                        cor_text: [],       //验证正确时的信息提示(必填),   例:text_msg: ['输入正确。', '输入正确。']
                        check_arr:[],       //验证方法(顺序书写)
                        btnFn:function(){}, //扩展添加新的验证数据
                    });
            */

            var f1 = new Check_form();
            f1.init({
                formID: oForm,//表单ID
                text_msg: ['4-16个字符,字母/中文/数字/下划线。', '4-16个字符,区分大小写。', '请再次输入密码,区分大小写。', '请输入有效的邮箱地址。', '', '您的职业是?', ''],
                err_text: ['您输入的用户名不符合要求,请检查。', '密码不能为空请重新输入。', '两次密码不一致,请重新输入。', '您输入的邮箱不符合要求,请检查。', '已超出字符限制。', '您的职业还没选择哦~', '您还没接受条款哦~'],
                cor_text: ['可用的用户名。', '输入正确。', '输入正确。', '输入正确。', ' COOL!', 'COOL!', '您已接受条款'],
                checkArr: [     //验证方法(按顺序书写)
                    check_inputText1 = function () {
                        if (inputText1.value == '' || inputText1.value.length >= 17) {
                            return false;
                        }
                        else {
                            return true;
                        }
                    },
                    check_pass = function () {
                        if (passwordID.value == '' || passwordID.value.length >= 17) {
                            return false;
                        }
                        else {
                            return true;
                        }
                    },
                    check_repass = function () {
                        if (repasswordID.value != passwordID.value || repasswordID.value == '') {
                            return false;
                        }
                        else {
                            return true;
                        }
                    },
                    check_email = function () {
                        var re = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                        if (re.test(emailID.value) != true) {
                            return false;
                        }
                        else {
                            return true;
                        }
                    },
                    check_word = function () {
                        if (stringSize(oInfo.value) > 100) {
                            return false;
                        }
                        else {
                            return true;
                        }
                        function stringSize(s) {
                            return s.length + (s.match(/[^\x00-\xff]/g) || '').length;
                        }
                    },
                    check_select1 = function () {
                        if (selectID.value == 0) {
                            return false;
                        }
                        else {
                            return true;
                        }
                    },
                    check_agreeTk = function () {
                        if (oAgree_checkbox.checked) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                ],
                checkWord: {//textarea字符验证
                    textareaID: oInfo,
                    wordID: oWord_msg,
                    maxNum: 100
                }

                /*btnFn: function () {//函数只能返回true/false
                    f1.createErrOrCor(selectID, 4);
                    f1.createErrOrCor(oAgree_checkbox, 5);
                    f1.createErrOrCor(oTextarea_box, 6);
                    var cSelect = (function () {
                        if (selectID.value) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    })();
                    var cTk = (function () {
                        if (oAgree_checkbox.checked) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    })();
                    return cSelect && cTk;
                }*/
            });
            f1.word_dal();
        };

        /*****************************************************************************************************/
        function Check_form() { };
        Check_form.prototype = {
            init: function (opt) {
                this.formID = opt.formID;
                this.text_msg = opt.text_msg;
                this.err_text = opt.err_text;
                this.cor_text = opt.cor_text;
                this.checkArr = opt.checkArr;
                this.checkWord = opt.checkWord;
                this.startCheck();
                this.btnClick(opt.btnFn);
            },
            startCheck: function () {//开始验证
                var _this = this;
                this.aInput = this.formID.getElementsByTagName('input');
                this.aSelect = this.formID.getElementsByTagName('select');
                this.aTextarea = this.formID.getElementsByTagName('textarea');
                this.screen(
                    function (thisCheck, Index) {//给需要验证的项绑定事件
                        _this.onFocus(thisCheck, Index);
                        _this.onBlurs(thisCheck, Index);
                    }
                );
            },
            screen: function (Fn) {//筛选出需要验证的项
                var _this = this;
                var num = 0;
                var t = 0;
                this.form_arr = this.formID.elements;
                for (var i = 0; i < this.form_arr.length; i++) {
                    (function (Index) {
                        if (_this.form_arr[Index].getAttribute('must') == 'true') {
                            Fn(_this.form_arr[Index], num++);
                            t++;
                            if (num >= t) {
                                num = t;
                            }
                        }
                    })(i);
                };
            },
            onFocus: function (thisCheck, Index) {//获得焦点
                var _this = this;
                myEvent(thisCheck, 'focus', function () {
                    thisCheck.parentNode.removeChild(thisCheck.nextSibling);
                    var oSpan = document.createElement('span');
                    oSpan.innerHTML = _this.text_msg[Index];
                    thisCheck.parentNode.insertBefore(oSpan, thisCheck.nextSibling);
                });
            },
            onBlurs: function (thisCheck, Index) {//失去焦点
                var _this = this;
                myEvent(thisCheck, 'blur', function () {
                    _this.createErrOrCor(thisCheck, Index);
                });
                
            },
            createErrOrCor: function (thisCheck, Index) {//创建span (错误或者正确的状态)。
                var _this = this;
                _this.verify(Index);
                thisCheck.parentNode.removeChild(thisCheck.nextSibling);
                var oSpan = document.createElement('span');
                if (_this.result[Index]) {
                    oSpan.innerHTML = _this.cor_text[Index];
                    oSpan.className = 'cor';
                    oSpan.style.border = 'none';
                    thisCheck.style.border = '1px solid #a6ce38';
                    thisCheck.parentNode.insertBefore(oSpan, thisCheck.nextSibling);
                }
                else {
                    oSpan.innerHTML = _this.err_text[Index];
                    oSpan.className = 'err';
                    oSpan.style.border = 'none';
                    thisCheck.style.border = '1px solid #f00';
                    thisCheck.parentNode.insertBefore(oSpan, thisCheck.nextSibling);
                }
            },
            verify: function (Index) {//验证判断
                var _this = this;
                this.result = [];
                if (Index === 0 || Index) {
                    this.result[Index] = this.checkArr[Index]();
                }
                else {
                    for (var i = 0; i < this.checkArr.length; i++) {
                        this.result.push(this.checkArr[i]());
                    };
                }
            },
            btnClick: function (f) {//提交验证          
                var _this = this;
                this.formID.onsubmit = function () {
                    var n = true;
                    _this.screen(function (thisCheck, Index) {
                        _this.createErrOrCor(thisCheck, Index);
                        if (_this.result[Index] == false) {
                            n = false;
                        }
                        else if (_this.result[Index] == _this.result[Index] + 1) {
                            n = true;
                        }
                    });
                    if (f) {
                        return f() && n;
                    }
                    else {
                        return n;
                    }
                };
            },
            word_dal: function () {//textarea输入字符判断
                var _this = this;
                myEvent(_this.checkWord.textareaID, 'keyup', function () {
                    var text_len = stringSize(_this.checkWord.textareaID.value);
                    _this.checkWord.wordID.innerHTML = text_len <= _this.checkWord.maxNum ? '还可以输入' + '<i>' + (_this.checkWord.maxNum - text_len) + '</i>' + '' : '已超出' + '<i>' + -(_this.checkWord.maxNum - text_len) + '</i>' + '';
                    function stringSize(s) {
                        return s.length + (s.match(/[^\x00-\xff]/g) || '').length;
                    }
                });
            }
        };
        function myEvent(obj, sEvent, fn) {
            obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
        };
    </script>
</body>
</html>

 

posted @ 2013-12-07 18:28  The0ne  阅读(237)  评论(0编辑  收藏  举报