表单插件

JS

/**
 * 表单验证插件：
 * 1》input加 data-empty时，为必填项，提交时验证。
 * 2》验证正则规则可根据自己需求更改
 * @param options
 * @returns {$}
 */
$.fn.validator = function (options) {
    var defaults = {
        userNameReg: /^\w+$/,//数字、26个英文字母或者下划线
        passwordReg: /^\w+$/,
        passwordPower: true,//为true时 验证密码强弱程度
        passwordWeak:"#ff460f",//密码最弱时（只有一种类型）颜色值
        passwordMid:"#ff910f",//密码（有两种类型）颜色值
        passwordStrong:"#a9e00",//密码（有两种以上类型）颜色值
        emailReg: /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/,
        ageReg: /^((1[8-9])|([2-5]\d)|(6[0-5]))$/,// 18-65 /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,//0-120
        phoneReg: /^1[34578]\d{9}$/,
        telReg: /^0\d{2,3}-\d{7,8}$/,//如：0311-7548954
        idCardReg: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,//18位身份证，X为大写
        faxReg: /^(\d{3,4})?[-]?\d{7,8}$/,//如：0311-7548954 或 03117548954
        nameReg: /^[\u4E00-\u9FFF]+$/,//要求中文
        qqReg:/^[1-9][0-9]{4,9}$/

    };
    options = $.extend({}, defaults, options);

    //获取元素及定义变量
    var $oInput = $("input");
    var $btnSubmit = $("button[type='submit']");


    //正则验证
    function regValidate(className, inputVal, minLength) {
        var reg = false;

        if (className.indexOf("userName") != -1 && !options.userNameReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("password") != -1) {
            if (options.passwordPower) {
                var degree = checkStrong(inputVal, minLength);
                var $power = $(".password").parents(".form-item").find("ul");

                switch (degree) {
                    case 1:
                        $power.find("li:first").children("div").css("backgroundColor",options.passwordWeak);
                        $power.find("li:first").children("p").css("color",options.passwordWeak);
                        break;
                    case 2:
                        $power.find("li:lt(2)").children("div").css("backgroundColor",options.passwordMid);
                        $power.find("li:lt(2)").children("p").css("color",options.passwordMid);
                        break;
                    default:
                        $power.find("li").children("div").css("backgroundColor",options.passwordStrong);
                        $power.find("li").children("p").css("color",options.passwordStrong);
                }

            } else if (!options.passwordReg.test(inputVal)) {
                reg = true;
            }
        }
        if (className.indexOf("rePassword") != -1) {
            var firPassword = $(".password").val();
            if (inputVal != firPassword) {
                reg = true;
            }
        }
        if (className.indexOf("email") != -1 && !options.emailReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("phone") != -1 && !options.phoneReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("tel") != -1 && !options.telReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("fax") != -1 && !options.faxReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("name") != -1 && !options.nameReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("age") != -1 && !options.ageReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("idCard") != -1 && !options.idCardReg.test(inputVal)) {
            reg = true;
        }
        if (className.indexOf("qqNum") != -1 && !options.qqReg.test(inputVal)) {
            reg = true;
        }
        return reg;
    }

    //是否为纯数字
    function isDigit(s) {
        var patrn = /^[0-9]{1,20}$/;
        if (!patrn.exec(s)) return false
        return true
    }


    function CharMode(iN) {
        if (iN >= 48 && iN <= 57) //数字
            return 1;
        if (iN >= 65 && iN <= 90) //大写字母
            return 2;
        if (iN >= 97 && iN <= 122) //小写
            return 4;
        else
            return 8; //特殊字符
    }

    /*
     统计字符类型
     */
    function bitTotal(num) {
        modes = 0;
        for (i = 0; i < 6; i++) {
            if (num & 1) modes++;
            num >>>= 1;
        }
        return modes;
    }

    /*
     返回密码的强度级别
     */
    function checkStrong(sPW, minlength) {
        if (sPW.length <= minlength)
            return 0; //密码太短
        Modes = 0;
        for (i = 0; i < sPW.length; i++) {
            //测试每一个字符的类别并统计一共有多少种模式.
            Modes |= CharMode(sPW.charCodeAt(i));
        }
        return bitTotal(Modes);
    }


    //验证方法
    function validator($oInput) {
        var $thisParent = $oInput.parent();
        var oInputVal = $oInput.val();
        var oInputClass = $oInput.attr("class");
        var minLen = $oInput.attr("minlength");
        var msgError = $oInput.attr("data-error");
        var regTemp;


        //匹配样式名，执行正则验证
        if (typeof(oInputClass) != "undefined") {
            regTemp = regValidate(oInputClass, oInputVal, minLen);
        }

        //添加及删除错误提示
        if ($thisParent.has(".error").length == 0) {
            if ((minLen != "" && oInputVal.length < minLen) || regTemp) {
                $thisParent.append("<span class='error'>" + msgError + "</span>")
            }
        } else if (!regTemp) {
            if (minLen != "" && oInputVal.length >= minLen) {
                $oInput.siblings("span").remove();
            } else if (typeof(minLen) == "undefined") {
                $oInput.siblings("span").remove();
            }

        }
    }

    //失去焦点
    $oInput.blur(function () {
        var $this = $(this);
        validator($this);
    });

    //得到焦点
    $oInput.focus(function () {

    });

    //提交
    $btnSubmit.click(function (e) {

        $oInput.each(function () {
            var $this = $(this);
            var oInputEmpty = $this.attr("data-empty");
            if (typeof (oInputEmpty) != "undefined") {
                validator($this);
            }
            if ($this.parent().has(".error").length != 0) {
                e.preventDefault();
            }
        })
    });


    return this;
};

CSS

* {
    font: normal normal 14px/20px arial, "Microsoft YaHei";
    /*font: italic bold 14px/20px arial,"Microsoft YaHei";*/
}

.form-validate {
    width: 900px;
    margin: 80px auto 0;
    border: 1px solid #eee;
}

.form-validate h1 {
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin: 25px 0 15px;
}

.form-validate .form-item {
    width: 100%;
    padding: 8px 0 8px 0;
    overflow: hidden;
    _position: relative;
    display: table;
}

.form-validate .form-item>p {
    float: left;
    width: 240px;
    margin-left: 100px;
    text-align: right;
    padding-right: 15px;
    line-height: 30px;
}

.form-validate .form-item em {
    color: #f00;
    padding-right: 5px;
}

.form-validate .form-item input {
    float: left;
    width: 240px;
    padding-left: 10px;
    line-height: 28px;
    height: 28px;
    border: 1px solid #ddd;
}

.form-validate .form-item span.error {
    padding-left: 15px;
    display: table-cell;
    _position: absolute;
    _top: 50%;
    padding-right: 75px;
    width: 200px;
    margin-left: 20px;
    color: #ff0000;
    font-size: 12px;
    line-height: 14px;
    vertical-align: middle;
    text-align: left;
}
.form-item .power{
    overflow: hidden;
    width: 100%;
    margin-left: 355px;
    padding-top: 10px;
}
.form-item .power li{
    float: left;
    width: 50px;
    margin-right:5px;
}
.form-item .power li div{
    width: 100%;
    height: 5px;
    background-color: #eeeeee;

}
.form-item .power li p{
    font-size: 12px;
    text-align: center;
    color: #ddd;
}
.form-item .power li.red p{
    color: red;
}
.form-item .power li.yellow p{
    color: yellow;
}
.form-item .power li.green p{
    color: green;
}
.form-item .power li.red div{
    background-color: red;
}
.form-item .power li.yellow div{
    background-color: yellow;
}
.form-item .power li.green div{
    background-color: green;
}


.form-validate .form-item .form-btn {
    margin: 0 auto;
    text-align: center;
}

.form-validate .form-item button {
    border: 1px solid #dddddd;
    width: 80px;
    height: 30px;
    background: #eee;
    border-radius: 3px;
}

.form-validate .form-item button.current,
.form-validate .form-item button:hover {
    background-color: #00a2d4;
    color: #fff;
    cursor: pointer;
    border: 1px solid #00a2d4;

}

HTML

<div class="form-validate">
    <h1>表单验证</h1>
    <form action="" id="validateForm">
        <div class="form-item">
            <p><em>*</em>会员名：</p>
            <input type="text" class="userName" placeholder="设置会员名" maxlength="25" minlength="5" data-empty
                   data-error="请输入5-25个字符，一旦设置成功无法修改">

        </div>
        <div class="form-item">
            <p><em>*</em>密码：</p>
            <input type="password" class="password" data-empty placeholder="设置你的登录密码" minlength="6" maxlength="20"
                   data-error="6~20个字符,只能包含字母、数字以及标点符号（除空格）">
            <ul class="power" id="powerDegree">
                <li>
                    <div></div>
                    <p>较弱</p>
                </li>
                <li>
                    <div></div>
                    <p>一般</p>
                </li>
                <li>
                    <div></div>
                    <p>较强</p>
                </li>
            </ul>
        </div>
        <div class="form-item">
            <p><em>*</em>重复密码：</p>
            <input type="password" class="rePassword" data-empty placeholder="请再次输入你的密码" minlength="6" maxlength="20"
                   data-error="请再次输入密码">
        </div>
        <div class="form-item">
            <p><em>*</em>邮箱：</p>
            <input type="text" class="email" placeholder="请输入你的邮箱" data-error="请输入正确的邮箱格式如：xxxxxx@aaa.com">
        </div>
        <div class="form-item">
            <p><em>*</em>手机：</p>
            <input type="text" class="phone" placeholder="请输入你的手机号码" data-error="请输入正确的手机号码">
        </div>
        <div class="form-item">
            <p><em>*</em>电话：</p>
            <input type="text" class="tel" placeholder="请输入你的电话号码" data-error="请输入正确的电话号码，格式为0658-7845934">

        </div>
        <div class="form-item">
            <p>年龄：</p>
            <input type="text" class="age" placeholder="请输入你的年龄" data-error="年龄范围18-65">
        </div>
        <div class="form-item">
            <p>传真：</p>
            <input type="text" class="fax" placeholder="请输入传真号码" data-error="传真格式如：0371-68787027">
        </div>
        <div class="form-item">
            <p><em>*</em>身份证：</p>
            <input type="text" class="idCard" maxlength="18" placeholder="请输入身份证号" data-error="请输入正确的身份证号码,字母为大写">
        </div>
        <div class="form-item">
            <p><em>*</em>姓名：</p>
            <input type="text" minlength="2" class="name" placeholder="请输入姓名" data-error="请输入中文姓名，不能含空格">
        </div>
        <div class="form-item">
            <p>QQ：</p>
            <input type="text"  class="qqNum" placeholder="请输入QQ" data-error="请输入正确的QQ号码">
        </div>
        <div class="form-item">
            <div class="form-btn">
                <button class="current" type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
        </div>

    </form>
</div>