jQuery添加自定义扩展

1、validate.js

//使用extend定义全局函数
$.extend({
    isUserName: function (value) {
        return new RegExp("/^[A-Za-z0-9\-\_\u4e00-\u9fa5]{2,20}$/").test(value)
    },

    isEmail: function (value) {
        return new RegExp("^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$").test(value)
    },

    isDigits: function (value, required) {
        if (required == undefined || required == false) {
            return new RegExp(/^\d+$/).test(value);
        } else {
            if (value.trim().length > 0) {
                return new RegExp(/^\d+$/).test(value);
            } else {
                return "请输入数字";
            }
        }
    },

    isPhone: function (value) {
        //regexp_mobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|17[0-9])\d{8}$/;  
        return new RegExp("^0?(13|15|18|14)[0-9]{9}$").test(value)
    },
});

2、validateObject.js

(function($){
   $.fn.extend({          
       alertWhileClick:function() {            
             $(this).click(function(){                 
                    alert($(this).val());           
              });           
        }       
   });

   $.fn.isDigits = function () {
      return new RegExp(/^\d+$/).test($(this).val());
   }
})(jQuery)

3、html页面引入validate.js文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="validate.js"></script>
    <!--<script type="text/javascript" src="validateObject.js"></script>-->
</head>

<body>
    <input id="txtUserName" type="text" value="" />
    <input id="btnLogin" type="button" value="请登录" />


    <!--调用validate.js文件-->
    <script type="text/javascript">
        $("#btnLogin").click(function (event) {
            var name = $("#txtUserName").val();

            ///“普通”验证方法
            //if (name.trim().length > 0 && /^\d+$/.test(name) == false) {
            //    alert("数量必须是数字");
            //}else{
            //    alert("格式正确");
            //}

            ///“非必填”验证调用方法
            //if (name.trim().length > 0 && $.isDigits(name) == false) {
            //    alert("数量必须是数字");
            //    return;
            //} else {
            //    alert("格式正确");
            //}

            ///“必填”验证调用方法
            var result = $.isDigits(name, true);
            if (result == true || result == false) {
                if (result) {
                    alert("格式正确");
                } else if (!result) {
                    alert("数量必须是数字");
                }
            } else {
                alert(result);
            }
        })
    </script>


    <!--调用validateObject.js文件-->
    <script type="text/javascript">
        //$("#txtUserName").alertWhileClick();

        //$("#btnLogin").click(function (event) {
        //    var name = $("#txtUserName").val();
        //    if (name.trim().length > 0 && $("#txtUserName").isDigits() == false) {
        //        alert("数量必须是数字");
        //        return;
        //    } else {
        //        alert("格式正确");
        //    }
        //});
    </script>
</body>
</html>

jQuery添加自定义扩展

猜你喜欢