<body>

<form method="post" action="">

    <div class="int">

        <label for="username">用户名:</label>

        <!-- 为每个需要的元素添加required -->

        <input type="text" id="username" class="required" />

    </div>

    <div class="int">

        <label for="email">邮箱:</label>

        <input type="text" id="email" class="required" />

    </div>

    <div class="int">

        <label for="personinfo">个人资料:</label>

        <input type="text" id="personinfo" />

    </div>

    <div class="sub">

        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>

    </div>

</form>

</body>






 






<script type="text/javascript">

//<![CDATA[

$(function(){

        /*

        *思路大概是先为每一个required添加必填的标记，用each()方法来实现。

        *在each()方法中先是创建一个元素。然后通过append()方法将创建的元素加入到父元素后面。

        *这里面的this用的很精髓，每一次的this都对应着相应的input元素，然后获取相应的父元素。

        *然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。

        *这里用了一个判断is()，如果是用户名，做相应的处理，如果是邮件做相应的验证。

        *在jQuery框架中，也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value，和this.value.length。对内容进行判断。

        *然后进行的是邮件的验证，貌似用到了正则表达式。

        *然后为input元素添加keyup事件与focus事件。就是在keyup时也要做一下验证，调用blur事件就行了。用triggerHandler()触发器，触发相应的事件。

        *最后提交表单时做统一验证

        *做好整体与细节的处理

        */

        //如果是必填的，则加红星标识.

        $("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>


												


											
jq之简单表单验证的更多相关文章
	

    
								
  1. JS简单表单验证
		
    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
    
		
    2. 
						
  2. 如何利用jQuery进行简单表单验证
		
    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
    
		
    3. 
						
  3. jq中的表单验证插件------jquery.validate
		
    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...
    
		
    4. 
						
  4. 自制简单表单验证relative与absolute定位
		
    html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
    
		
    5. 
						
  5. 关于ajax用户名验证和jquery实现简单表单验证
		
    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input  ...
    
		
    6. 
						
  6. AJAX案例二：简单表单验证
		
    案例:如果用户名输入为张三,那么在失去焦点时后面会显示该用户名已被注册,否则显示可以注册! <%@ page language="java" import="jav ...
    
		
    7. 
						
  7. JavaScrip——简单练习（输出方式，简单表单验证）
		
    <script> //输出方式 document.write(Date());//获取当前时间 document.write(1); document.write("<p& ...
    
		
    8. 
						
  8. AngularJS的简单表单验证
		
    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.rar 代码: <!DOCTYPE HTM ...
    
		
    9. 
						
  9. 初学structs2，表单验证
		
    一.简单表单验证示例 structs.xml配置 <struts> <package name="validate" namespace="/valid ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. api1
			
    http://www.android-doc.com/reference/android/app/Fragment.html
    
			
    2. 
						
  2. Unity NGUI 网络斗地主 -界面制作
			
    Unity NGUI 网络斗地主 -界面制作 源文件在群(63438968群共享!) @灰太龙 这一节说一下NGUI的界面摆放,并且教会大家使用NGUI的自适应功能! 在这里感谢@Gamer,是他给我 ...
    
			
    3. 
						
  3. 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件
			
    有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js,  ...
    
			
    4. 
						
  4. Snowflake Snow Snowflakes（哈希，大素数取模）
			
    Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 27277   Accepted: 7197 Description You  ...
    
			
    5. 
						
  5. 2015 CCC - 01 统计数对
			
    源:CNUOJ-0384 http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=354 题目分析:当时拿到这道题第一个想法就是排序后n^2暴 ...
    
			
    6. 
						
  6. Java---网络编程(2)-UDP
			
    UDP ☆ UDP 将数据及源和目的封装成数据包中,不需要建立连接 每个数据报的大小在限制在64k内 因无连接,是不可靠协议 不需要建立连接,速度快 DatagramSocket和DatagramPa ...
    
			
    7. 
						
  7. android网络图片的下载
			
    android网络图片的下载 /** * Get image from newwork * * @param path * The path of image * @return byte[] * @ ...
    
			
    8. 
						
  8. How to distribute your own Android library through jCenter and Maven Central from Android Studio
			
    In Android Studio, if you wish to include any library to your application. You could just simply add ...
    
			
    9. 
						
  9. openStack 云平台管理节点管理网口流量非常大 出现丢包严重 终端总是时常中断问题调试及当前测试较有效方案
			
    tuning for Data Transfer hosts connected at speeds of 1Gbps or higher <一.本次OpenStack系统调试简单过程简单记录& ...
    
			
    10. 
						
  10. Appium移动自动化测试（三）--安装Android模拟器（转）
			
    Appium移动自动化测试(三)--安装Android模拟器 2015-06-08 10:33 by 虫师, 30828 阅读, 9 评论, 收藏, 编辑 当Android SDK安装完成之后,并不意 ...
    
			
    11.