分享纯手写漂亮的表单验证

哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧。

因为是自定义样式,所以兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com

css

 <style>
     /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/
 .ui-slider-tooltip{  background:#fa;   border:px solid #fa;  color:#fff;  display: block;  text-align: left;  padding: px px px px;  position: absolute;  z-index:; }
 .ui-corner-all {  border-radius: px;  -moz-border-radius-bottomleft:px;  -moz-border-radius-bottomright:px;  -moz-border-radius-topleft:px;  -moz-border-radius-topright:px;  -webkit-border-top-left-radius:px px;  -webkit-border-top-right-radius:px px;-webkit-border-bottom-right-radius:px px;  -webkit-border-bottom-left-radius:px px;}
 .ui-tooltip-pointer-down {  border-bottom-width: ;  border-left: px dashed transparent;   border-right: px dashed transparent;  border-top: px solid #fa;  bottom:  -px;  display: block;  height:;  left: %;  margin-left: -px;  position: absolute;   width:;}
 .ui-tooltip-pointer-down-inner {  border-left: px dashed transparent;   border-right: px dashed transparent;  border-top: px solid #fa;  left: -px;  top: -px;  position: absolute; }
 .tip{  font-size:pt;  line-height:px;}
  .error{ border: px solid rgb(, , );}
   </style>

前台:

 <input type="text" id="userName"/>
 <input type="submit" onclick="submitOneClickApply()"/>

js:

 function submitOneClickApply() {
     var username = $("#userName").val();
     if (username == "" || username == "请输入您的姓名") {
       $("#userName").rzAlertTips({ flagInfo: '请输入联系人', isAnimate: true });
     } 

调用的js:

 <script type="text/javascript">
   (function ($) {
     jQuery.fn.extend({
       rzAlertTips: function (settings) {
         $(this).each(function () {
           //初始化配置信息
           var options = jQuery.extend({
             flagCss: "tip",
             flagWidth: $(this).outerWidth(),
             flagInfo: $(this).attr("title"),
             isAnimate: false
           },
     settings);
           if (!options.flagInfo) {
             return;
           }
           $(this).removeAttr("title");
           var obj = $(this);
           var oToolTip = null;
           var fun_show = function () {
             //设置提示信息最小宽度为
             options.flagWidth = "auto"; // (parseInt(options.flagWidth) < ) ? : parseInt(options.flagWidth);+ "px"
             var oTip = $("<div class='ui-slider-tooltip ui-corner-all' id='tipWrap_" + $(this).attr("id") + "'></div>");
             var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");
             var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class", options.flagCss).css("width", options.flagWidth);
             //合并提示信息
             oToolTip = $(oTip).append(oTipInfo).append(oPointer);
             if ($("#tipWrap_" + $(this).attr("id")).length > ) $("#tipWrap_" + $(this).attr("id")).remove();
             //添加淡入效果
             if (options.isAnimate) {
               $(oToolTip).fadeIn("slow");
             }
             $(obj).after(oToolTip);
             //计算提示信息的top、left和width  //position.top
             var position = $(obj).position();
             var oTipTop = eval(position.top - $(oTip).outerHeight() - );
             var oTipLeft = position.left;
             $(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");
           };
           fun_show();
           $('.error').removeClass('error');
           $(this).addClass("error");
           setTimeout(function () { $(oToolTip).remove(); }, );
         });
         return this;
       }
   })(jQuery);
 </script>

以上内容就是小编给大家分享的纯手写漂亮的表单验证,希望大家喜欢。

(0)

相关推荐

  • Extjs表单常见验证小结

    复制代码 代码如下: //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为: qtip-当鼠标移动到控件上面时显示提示; title-在浏览器的标题显示,但是测试结果是和qtip一样的; under-在控件的底下显示错误提示; side-在控件右边显示一个错误图标,鼠

  • ThinkPHP表单自动提交验证实例教程

    本文以实例讲述了ThinkPHP表单自动提交验证的实现过程,详细步骤如下所示: 一.模板部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITL

  • java正则表达式表单验证类工具类(验证邮箱、手机号码、qq号码等)

    java使用正则表达式进行表单验证工具类,可以验证邮箱.手机号码.qq号码等 复制代码 代码如下: package util; import java.util.regex.Matcher;import java.util.regex.Pattern; /** * 使用正则表达式进行表单验证 *  */ public class RegexValidateUtil {    static boolean flag = false;    static String regex = ""

  • Laravel框架表单验证详解

    基础验证例子 复制代码 代码如下: $validator = Validator::make( array('name' => 'Dayle'), array('name' => 'required|min:5') ); 传递给 make 函数的第一个参数是待验证的数据,第二个参数是对该数据需要应用的验证规则. 多个验证规则可以通过 "|" 字符进行隔开,或者作为数组的一个单独的元素. 通过数组指定验证规则 复制代码 代码如下: $validator = Validator

  • 分享纯手写漂亮的表单验证

    哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧. 因为是自定义样式,所以兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com css <style> /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/ .ui-slider-tooltip{ background:#fa; border:px solid #fa; color:#fff; display: block; text-align: left; padding: p

  • Validform+layer实现漂亮的表单验证特效

    Validform是一款优秀的表单验证插件,layer是一款优秀的弹出窗口插件.下面通过例子看看这二者碰出的火花吧 首先要引入jquery,Validform和layer <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascrip

  • 手把手教你自己写一个js表单验证框架的方法

    在表单程序中,在页面上需要很多的Js代码来验证表单,每一个field是否必须填写,是否 只能是数字,是否需要ajax到远程验证,blablabla. 如果一个一个单独写势必非常的繁琐,所以我们的第一个目标就是构建一个类似DSL的东西, 用表述的语句而非控制语句来实现验证. 其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交,但是单独验证会因为 这个特征而增加很多额外的控制代码,且经常会验证不全面.所以第二个目标就是能够全面 的整合整个验证的过程. 最后不能是一个无法扩展的一切写死的实现

  • Vue表单验证插件的制作过程

    前言 前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. 当然为什么不找个插件呢? vue-validator呀. 1.我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需要.事实证明,vue-validator有50kb,而我写的va.js只有8kb. 2.另一个是,vue-val

  • jQuery 表单验证扩展(四)

    周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低,不知道是文章太失水准还是什么其他原因,这里写文章只是为了分享一下自己写代码的心得,同时也是巩固自己所学的东西!如果文章中存在问题,请大家多多斧正!本篇文章介绍jQuery 表单验证扩展中的控件值的比较 (一). 存在的问题 这篇文章和第一篇中提到的控件值之间的比较没有多大的区别,唯一更近的就是在样式的处理.同时就是对代码进行了简化.但是这里还是单独拿出来讲解一下,此文非常简单,所以不会有大篇幅的讲解. (二). 参数介绍 onFoc

  • 功能强大的jquery.validate表单验证插件

    本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立

  • AngularJS使用angular-formly进行表单验证

    当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type

  • 基于angularJS的表单验证指令介绍

    做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了. 这里使用AngularJS的指令进行处理代码及其简洁明了 下面是指令JS代码 app.directive('ccForm',['$parse',function ($parse) { return { restrict:'A', link:function (scope,element,attrs) { var first=true; var errors=0; var c

  • Laravel中使用FormRequest进行表单验证方法及问题汇总

    在`Laravel`中,每一个请求都会被封装为一个`Request`对象,`Form Request`对象就是包含了额外验证逻辑(以及访问权限控制)的自定义`Request`类. 本文分析了FormRequest异常的处理流程并提出了自定义处理FormRequest验证失败的思路. 所有示例基于Laravel 5.1.39 (LTS) 今天天气不错,我们来说说表单验证. Controller中做表单验证 有的同学把表单验证逻辑写在Controller中,例如这个对用户提交评论内容的验证: <?p

随机推荐