`

表单验证

阅读更多

<script type="text/javascript">
//<![CDATA[
$(function(){
  //如果是必填的,则加红星标识.
  $("form :input.required").each(function(){
   var $required = $("<strong class='high'> *</strong>"); //创建元素
   $(this).parent().append($required); //然后将它追加到文档中
  });
         //文本框失去焦点后
     $('form :input').blur(function(){
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();
    //验证用户名
    if( $(this).is('#username') ){
     if( this.value=="" || this.value.length < 6 ){
         var errorMsg = '请输入至少6位的用户名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
     }else{
         var okMsg = '输入正确.';
         $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
     }
    }
    //验证邮件
    if( $(this).is('#email') ){
    if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '请输入正确的E-Mail地址.';
       $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    }else{
                      var okMsg = '输入正确.';
       $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    }
    }
  }).keyup(function(){
     $(this).triggerHandler("blur");
  }).focus(function(){
       $(this).triggerHandler("blur");
  });//end blur

  
  //提交,最终验证。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    }
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove();
   });
})
//]]>
</script>

分享到:
评论

相关推荐

    DW笨阿猪高级表单验证

    在IT行业中,表单验证是前端开发中的一个重要环节,它确保用户输入的数据符合特定的规则,从而维护数据的完整性和安全性。"DW笨阿猪高级表单验证"可能是一个专门针对Dreamweaver(DW)用户的插件或教程,旨在帮助...

    表单验证jquery插件

    在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到...

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....

    简单的表单验证

    在IT领域,表单验证是网页开发中必不可少的一部分,它确保用户输入的数据符合预设的规则,从而保证数据的有效性和安全性。"简单的表单验证"这个主题,通常涉及到JavaScript(JS)这一前端脚本语言,用于实现客户端的...

    js表单验证 全网最全的 表单验证

    在Web开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期,从而防止错误数据的提交,提升用户体验并保障数据安全。本资源集合了全网最全面的JavaScript表单验证方法,覆盖了从基础到高级的各种...

    bootstrap风格的html5表单验证示例

    4. **Bootstrap表单验证状态**:Bootstrap还提供了表单验证状态样式,如`.has-error`(现在推荐使用`.is-invalid`),`.has-warning`和`.has-success`,这些类可以改变输入框、标签和帮助文本的样式,以反馈用户的...

    Vue ~ element-ui 动态表单验证,支持添加和删除操作

    本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景,主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证: Vue.js允许开发者通过...

    笨阿猪高级表单验证插件

    在IT行业中,表单验证是前端开发中一个至关重要的环节,尤其对于新手开发者而言,能够快速、有效地实现表单验证可以极大地提升工作效率。"笨阿猪高级表单验证插件"是一个专为菜鸟设计的工具,它简化了复杂的验证过程...

    JQuery实现表单验证

    在Web开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合应用程序的要求和预期。JQuery,一个流行的JavaScript库,提供了强大的功能来简化这一过程。本篇将深入探讨如何利用JQuery实现表单验证,特别...

    表单验证EasyValidator3.0

    《深入理解EasyValidator3.0:打造高效表单验证》 在Web开发中,表单验证扮演着至关重要的角色,它能确保用户输入的数据符合预设的规则,从而避免无效数据进入系统,提高数据处理的准确性和安全性。EasyValidator...

    表单验证控件 简单

    使用简单,功能强大的表单验证插件。 1、验证插件支持正则表达式验证,函数验证,ajax异步验证,支持对比验证,并支持对表单的自定义属性或指定属性进行验证,应该足矣满足常用软件及网站开发需求。(可根据自己需求...

    jquery表单验证代码百度注册页面表单验证

    在IT行业中,前端开发是构建用户交互界面的关键环节,而表单验证是前端开发中必不可少的部分。本示例聚焦于使用jQuery库进行表单验证,特别是在百度注册页面的应用。jQuery是一个广泛使用的JavaScript库,它简化了...

    jq表单验证大全.rar jq表单验证大全.rar

    《jq表单验证大全》是针对使用jQuery库进行前端表单验证的一份综合资源集合,主要涵盖各种常见的表单验证场景和解决方案。jQuery,作为一款轻量级的JavaScript库,因其简洁的API和强大的功能而广受欢迎,尤其在处理...

    from 表单验证 js框架类库

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...

    详细讲解—表单验证框架的实现

    在Web开发中,表单验证框架的实现是至关重要的,它确保了用户输入的数据符合预设的规则,防止无效或恶意的数据进入系统。本部分将深入讲解如何在B/S架构的应用程序中实施一个简单的表单验证框架,以登录表单为例。 ...

    漂亮的表单验证效果

    在IT领域,表单验证是用户体验中的重要环节,它确保用户输入的数据符合应用程序或网站的预期格式和要求。"漂亮的表单验证效果"这个主题强调了不仅需要验证数据的正确性,还要注重验证过程的视觉反馈,提升用户的交互...

    js表单验证 表单验证类 整合

    js表单验证 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 Validator是基于...

    dw表单验证高级插件-asp表单验证高级插件-测试通过

    "dw表单验证高级插件-asp表单验证高级插件-测试通过"这个标题暗示了我们正在讨论的是一个针对Dreamweaver的高级插件,用于增强ASP(Active Server Pages)平台上的表单验证功能,并且已经通过了测试,证明其功能稳定...

    javascript 表单验证禁止输入中文汉字

    在网页开发中,表单验证是一项非常重要的任务,它确保用户输入的数据符合预期的格式,以提高数据质量并减少服务器端的压力。JavaScript 是一种常用的客户端脚本语言,它可以直接在用户的浏览器上运行,用于实现表单...

    jquery表单验证实例网站会员注册表单验证提交form表单代码

    在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高数据质量和用户体验。jQuery作为一个强大的JavaScript库,提供了简单易用的API来进行表单验证。本实例将深入探讨...

Global site tag (gtag.js) - Google Analytics