图集1/1

正文 5120字数 158,711阅读


在线演示地址：jQuery表单输入数据验证插件
源码打包下载：
附件：upload/attach/tbs-Y3gx73nc90.rar

使用示例html代码
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="formcheckiswtfjuly.js"></script> <form id="formcheckiswtfjuly" autocomplete="off"><!-- id="formcheckiswtfjuly" 表单提交id 同下--> <!-- prompt="请输入昵称！" 提示文字 required="1" 为非必填，必填项不用定义--> <div class="input">昵称：<input type="text" name="nickname" prompt="请输入昵称！" /></div> <!-- iswtfm="tel" 手机号输入框验证 iswtfm="email" 邮箱输入框验证 --> <div class="input">电话：<input type="text" name="telephone" prompt="请输入11位数字电话号码！" iswtfm="tel" /></div> <div class="input">邮箱：<input type="text" name="email" prompt="请填写正确邮箱！" iswtfm="email" /></div> <div class="input">联系：<input type="text" name="contact" prompt="请输入联系人！" required="1" /></div><!--非必填项--> <div class="input">内容：<textarea rows="3" cols="20" name="content" prompt="请填写内容哦！"></textarea></div> <input type="button" id="formactionokiswtf" value="提交"> </form> <script type="text/javascript"> $(function(){ $('#formcheckiswtfjuly').FormCheckisWTFJuly({ 'color': '#fff', //文字颜色 'background':'red', //背景 'time':1000, //提示时间 'bid':'#formactionokiswtf' //提交按钮id }); }) </script>
Run code
Cut to clipboard

    formcheckiswtfjuly.js
    /* lizhenqiu.com */ ;(function($, window, document,undefined) { //定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'background':'yellow', 'time':1000, 'bid':'#formactionokiswtf' //'fontSize': '12px', //'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { /*beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); },*/ //获取input值 eachinputval:function(){ var settings=this.options; var vthis=this; //console.log(this); var vok=0; $('input,textarea').each(function(){ var $this=$(this); var prompt=$this.attr('prompt'); var iswtfm=$this.attr('iswtfm'); var nval=$this.val(); var required=$this.attr('required'); if(required){ vok=1; return true; } //var nhtml='<span class="formcheckiswtfjulyspan">'+prompt+'</span>' $this.css({'background':'','color':''}); vok=0; if(!nval){ //$this.parent().css('position','relative'); //$this.after(nhtml); vthis.eachinputvalclear($this,prompt,settings); return false; }else{ //判断是否电话号码 if(iswtfm=='tel'){ if(isNaN(nval) || nval.length!='11') { vthis.eachinputvalclear($this,prompt,settings); return false; } } //判断邮箱 if(iswtfm=='email'){ var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; var isok= reg.test(nval); if (!isok) { vthis.eachinputvalclear($this,prompt,settings); return false; } } } vok=1; //vthis.$element.submit(); //console.log(1111); }); if(vok) vthis.$element.submit(); return vok; }, eachinputvalclear:function($this,prompt,settings){ var vthis=this.$element.children(settings['bid']); vthis.attr('disabled',true); $this.val(prompt); $this.css({'background':''+settings.background,'color':''+settings.color}); $this.attr('readonly','readonly'); setTimeout(function(){ $this.val(''); $this.focus(); $this.css({'background':'','color':''}); vthis.attr('disabled',false); $this.attr('readonly',false); },settings.time); } } //在插件中使用Beautifier对象 $.fn.FormCheckisWTFJuly = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 //return beautifier.eachinputval(); //提交按钮 this.children(beautifier.options.bid).click(function(){ return beautifier.eachinputval(); }); //input获取焦点事件 /*this.children('input').focus(function(){ return beautifier.eachinputvalclear(); });*/ } })(jQuery, window, document);
    Run code
    Cut to clipboard