自己编写jQuery插件之表单验证

自己编写jQuery插件之表单验证

吐个嘈先：最近状态不咋滴，真是什么都不想干，不想上班，做什么都没动力，觉得没意思。不想这样，不想这样，快让这种情绪消失吧，忽忽....

表单验证在项目中用的还是比较多的，公司当前正在做的项目就要用到，故此写了此插件，先给大家看下在项目中应用的效果图吧：

直接上插件实现代码了，围绕代码进行讲解比较容易点：

 

/*

描述：基于jquery的表单验证插件。

时间：2014-8-3

作者：similar（281542025@qq.com）

*/

 

(function ($) {

    $.fn.checkForm = function (options) {

        var root = this; //将当前应用对象存入root

 

        var isok = false; //控制表单提交的开关

 

        var pwd1; //密码存储

        var defaults = {

            //图片路径

            img_error: "img/error.gif",

            img_success: "img/success.gif",

 

            //提示信息

            tips_success: '', //验证成功时的提示信息，默认为空

            tips_required: '不能为空',

            tips_email: '邮箱地址格式有误',

            tips_num: '请填写数字',

            tips_chinese: '请填写中文',

            tips_mobile: '手机号码格式有误',

            tips_idcard: '身份证号码格式有误',

            tips_pwdequal: '两次密码不一致',

 

            //正则

            reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i,  //验证邮箱

            reg_num: /^\d+$/,                                  //验证数字

            reg_chinese: /^[\u4E00-\u9FA5]+$/,                 //验证中文

            reg_mobile: /^1[3458]{1}[0-9]{9}$/,                //验证手机

            reg_idcard: /^\d{14}\d{3}?\w$/                     //验证身份证

        };

 

        //不为空则合并参数

        if(options)

            $.extend(defaults, options);

 

        //获取（文本框，密码框，多行文本框），当失去焦点时，对其进行数据验证

        $(":text,:password,textarea", root).each(function () {

            $(this).blur(function () {

                var _validate = $(this).attr("check"); //获取check属性的值

                if (_validate) {

                    var arr = _validate.split(' '); //用空格将其拆分成数组

                    for (var i = 0; i < arr.length; i++) {

                        //逐个进行验证，不通过跳出返回false,通过则继续

                        if (!check($(this), arr[i], $(this).val()))

                            return false;

                        else

                            continue;

                    }

                }

            })

        })

 

        //表单提交时执行验证,与上面的方法基本相同，只不过是在表单提交时触发

        function _onSubmit() {

            isok = true;

            $(":text,:password,textarea", root).each(function () {

                var _validate = $(this).attr("check");

                if (_validate) {

                    var arr = _validate.split(' ');

                    for (var i = 0; i < arr.length; i++) {

                        if (!check($(this), arr[i], $(this).val())) {

                            isok = false; //验证不通过阻止表单提交，开关false

                            return; //跳出

                        }

                    }

                }

            });

        }

 

        //判断当前对象是否为表单，如果是表单，则提交时要进行验证

        if (root.is("form")) {

            root.submit(function () {

                _onSubmit();

                return isok;

            })

        }

 

 

        //验证方法

        var check = function (obj, _match, _val) {
　　　　　　　//根据验证情况，显示相应提示信息，返回相应的值

            switch (_match) {

                case 'required':

                    return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);

                case 'email':

                    return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);

                case 'num':

                    return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);

                case 'chinese':

                    return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);

                case 'mobile':

                    return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);

                case 'idcard':

                    return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);

                case 'pwd1':

                    pwd1 = _val; //实时获取存储pwd1值

                    return true;

                case 'pwd2':

                    return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);

                default:

                    return true;

            }

        }

 

 

        //判断两次密码是否一致(返回bool值)

        var pwdEqual = function(val1, val2) {

            return val1 == val2 ? true : false;

        }

 

 

        //正则匹配(返回bool值)

        var chk = function (str, reg) {

            return reg.test(str);

        }

 

        //显示信息

        var showMsg = function (obj, msg, mark) {

            $(obj).next("#errormsg").remove();//先清除

            var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";

            if (mark)

                _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";

            $(obj).after(_html);//再添加

            return mark;

        }

    }

})(jQuery);

 

注释已经讲解了大部分内容了，多数人一看就懂了。

实现原理：

　　首先定义好正则，和相应的提示信息，

　　加上自定义check属性，

　　然后获取check属性的值，多个值用空格分开。利用split()将其拆分为数组，在逐个调用check()方法进行验证。

　　之后通过验证的返回值来确定显示的信息。

这里有两个验证是比较特别的，就是：

1.验证是否为空 （required）

2.两次密码是否一致 （pwd2）

这两个都没有用到正则，因为根本就用不上。 两次密码是否一致 ，单独写了个方法 pwdEqual();

插件里的验证正则我只写了几个 ，如果不够用可以自行扩展添加。

扩展只需3步：

1.添加正则，

2.添加相应提示信息，

3.check()方法中添加相应 case 处理

插件使用说明：

　　1.给表单下要进行验证的文本框，密码框 ，多行文本框加上自定义check属性

　　2.多个格式验证用空格间隔，如（同时验证必填和邮箱）： check="required email"

　　3.如果要验证两次密码是否一致，则pwd1和pwd2一起使用，如下图：

 

　　　pwd1存储第一次输入的值，pwd2存储第二次输入的值，如果你只用pwd1还好。

　　　但如果只用了pwd2，则验证是始终无法通过的。

下面给出DEMO示例代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>表单验证插件</title>

</head>

<body>

    <form id="myform" method="post" action="success.html">

        <ul>

            <li>

            邮箱：<input type="text" name="email" check="required email" />

            </li>

            <li>

            密码：<input type="password" check="required pwd1" />

            </li>

            <li>

            确认密码：<input type="password" check="required pwd2" />

            </li>

            <li>

            手机：<input type="text" name="num" check="required mobile" />

            </li>

            <li>

            数字：<input type="text" name="num" check="required num" />

            </li>

            <li>

            地址：<textarea cols="5" rows="5" check="required"></textarea>

            </li>

            <li>

            不加check验证的文本框：<input type="text" name="num" />

            </li>

        </ul>

        <input type="submit" value="提交" />

    </form>

    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="js/jquery.similar.checkForm.js" type="text/javascript"></script>

    <script type="text/javascript">

        $("#myform").checkForm();

    </script>

</body>

</html>

 

示例效果图片：

 

示例代码，成功提交是会跳转到success.html页面的，因此你要自己创建个success.html，里面可以什么都不写。

但是，只要有一个验证不通过，就不会成功跳转。

另外，你或许还需要2张图片：

//图片路径

 img_error: "img/error.gif",

 img_success: "img/success.gif",

 上传在这了，自己右键另存为吧。

语文没学好，语言组织能力，及表达能力实在是欠缺。自己理解了，却无法很好的讲出来，无奈。

大家如果还有什么不明白的可以留言，或者对上面代码有什么建议的也请留言(讨论出最好结果)，又或者发现了bug的，麻烦及时告知，谢谢！

 

转载于:https://www.cnblogs.com/taofx/p/4139924.html