请编写一个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);