表单验证插件实现-优快云博客

本文链接：https://blog.youkuaiyun.com/chen_enson_1/article/details/86582316

本文介绍了一个实用的表单验证插件，该插件使用jQuery实现，能够检查输入是否为空，验证手机号、邮箱和数字格式。通过示例展示了如何在HTML中设置表单，并在JavaScript中调用插件进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/***
 *  表单验证插件 
 *  @author chenshuofeng
 * 
 *  use:
 *  example 1 
 *  -------
 *  HTML:
 *   <div id="checkInput">
 *    <input id="phone" type="tel">
 *    <input id="code" type="text">
 *   </div>
 *  -------
 *  JS:
 *  $("#checkInput").checkInput(); //Checking  input is null;
 * 
 *  $("#checkInput").checkInput({
 *   checkPhone:'#phone'
 *  }) //Checking  #phone is a mobile phone number
 * 
 *  判断手机号或者邮箱需要配置参数
 *  
 */

;
(function ($) {
    var defualt = {};
    $.fn.checkInput = function (options) {
        var settings = $.extend({}, options);

        if (!$.fn.checkInput.checkNull(this))
            return false;
        if (JSON.stringify(settings) == JSON.stringify(defualt))
            return true;
        for(var key in settings){
          if(!$.fn.checkInput[key](settings[key])) 
            return false;
        }
        return true;
    }

    $.fn.checkInput.checkNull = function (obj) { //不为空返回true;
        var key = true;
        obj.find("input").each(function (index, value) {
            var v = $(value).val();
            if (v == '' || v == null || v == undefined) {
                layer.open({
                    content: '手机号或验证码不能为空！',
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
                key = false;
                return false;
            }
        });
        return key;
    }
    $.fn.checkInput.checkPhone = function (obj) { //正确返回true
        var phoneNumber = $(obj).val();
        if ((/^1[3|4|5|6|8][0-9]{9}/g).test(phoneNumber))
            return true;
        layer.open({
            content: '手机号码不正确！',
            skin: 'msg',
            time: 2 //2秒后自动关闭
        });
        return false;
    }

    $.fn.checkInput.checkNumber = function (obj) {//正确返回true
        var number = $(obj).val();
        if (number.test(/\D+/g)){
         alert("请填写数字")
            return false;
        }
        return true;
    }

    $.fn.checkInput.checkEmail = function (obj) { //正确返回true
        var email = $(obj).val();
        if ((/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/).test(email))
            return true;
        layer.open({
            content: '请填写正确的邮箱！',
            skin: 'msg',
            time: 2 //2秒后自动关闭
        });
        return false;
    }
})(jQuery);

jQ 表单验证插件