<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. 如何利用jQuery进行简单表单验证

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  3. jq中的表单验证插件------jquery.validate

    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...

  4. 自制简单表单验证relative与absolute定位

    html结构,用到了label与span <label class="relative"><input type="text" name=&q ...

  5. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

  6. AJAX案例二:简单表单验证

    案例:如果用户名输入为张三,那么在失去焦点时后面会显示该用户名已被注册,否则显示可以注册! <%@ page language="java" import="jav ...

  7. JavaScrip——简单练习(输出方式,简单表单验证)

    <script> //输出方式 document.write(Date());//获取当前时间 document.write(1); document.write("<p& ...

  8. AngularJS的简单表单验证

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.rar 代码: <!DOCTYPE HTM ...

  9. 初学structs2,表单验证

    一.简单表单验证示例 structs.xml配置 <struts> <package name="validate" namespace="/valid ...

随机推荐

  1. ps批量修改图片

    批量更改图片尺寸的ps脚本 高端干货!PHOTOSHOP实用脚本大合集

  2. Javascript学习之函数(function)

    在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针. 一 函 ...

  3. oracle 查询dblink的方法

    oracle 查询dblink的方法: SYSDBA登录, sys登录 SELECT * FROM SYS.link$;

  4. 清除html的标签和行内样式

    function shieldStyle(){ this._styleStartArr=["<span","<p","<strong ...

  5. SVN简明使用方法 .

    SVN简明使用方法 TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录.文件保存在中央版本库,除了能记住文件和目录的每次修改以外,版本库非 ...

  6. Crashing Robots

    Description In a modernized warehouse, robots are used to fetch the goods. Careful planning is neede ...

  7. MYSQL的硬盘IO过高引起的CPU过高判断

    其实,为客户提供相关日志,不就是RACKSPACE主要作的事? 俺们以后也可以效仿的.不要去解决,而是协助客户定位. http://blog.const.net.cn/a/17275.htm 上文的思 ...

  8. Netty4.0学习笔记系列之一:Server与Client的通讯

    http://blog.csdn.net/u013252773/article/details/21046697 本文是学习Netty的第一篇文章,主要对Netty的Server和Client间的通讯 ...

  9. RR区间锁 不是唯一索引,即使区间内没值,也锁

    +--------- +---------------------------------------------------------------------------------------- ...

  10. MakePic.com 图片制造 打造个性签名 拒绝垃圾邮件 生成个性印章

    MakePic.com 图片制造 打造个性签名 拒绝垃圾邮件 生成个性印章 欢迎使用MakePic.com