jq插件

请编写一个JQ验证插件,该插件的使用方式如下:

	<form id="myform">
        <input type="text" name="username" req="用户名不能为空" id='one'>
        <input type="text" name="email" req="邮箱不能为空" email="请填写正确的邮箱格式" class="name">
    </form>
    $("#myfrom").validate({
		"required" : function(msg){
		        //当标签上出现required属性时,表示该字段不为空
				//当规则不满足时,根据属性的内容信息进行提示。msg即为属性内容
		},
		    "email" : function(msg){
		        //email表示该字段为邮箱格式
				//当规则不满足时,根据属性的内容信息进行提示。msg即为属性内容 
		     },
		     ……
	})

方法一:在原型链下添加方法

$.fn.validate=function(msg){
            $(this).children('input').on('change',function(){
                if(!$(this).val()){
                    msg.required($(this).attr("req"));
                }
                
            })
            $(this).children('.name').on('change',function(){
                var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                var str=$(this).val();
                if(!reg.test(str)){
                    msg.required($(this).attr("email"));
                }
            })
        }

方法二:通过extend静态添加方法

(function($){
            $.fn.extend({
                "start" : function(){
                    console.log(1)
                },
                "end" : function(){
                    console.log(2)
                },
                "validate" : function(options){
                    var opts = $.extend({},options);
                    $(this).children('input').change('on',function(){
                        if(!$(this).val()){
                            opts.required($(this).attr("req"))
                        }     
                                     
                    })
                    $(this).children('.name').change('on',function(){
                        var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                        var str=$(this).val();
                        if(!reg.test(str)){
                            opts.email($(this).attr("email"));
                        }   
                    })
                    
                }
            })
        })(jQuery);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值