jquery-实现的添加个人信息加验证，附完全的注释，相信大家可以看懂

注：本例子是参照jquery手册中提供的案例写的，不过已经读懂，并加上了比较全的中文注释，相信大家可以看懂，如有bug谢谢指出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-实现的添加个人信息加验证，完全的注释</title>
<style>body { font-size: 62.5%; }label, input { display:block; }input.text { margin-bottom:12px; width:95%; padding: .4em; }fieldset { padding:0; border:0; margin-top:25px; }h1 { font-size: 1.2em; margin: .6em 0; }div#users-contain { width: 350px; margin: 20px 0; }div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: center; }.ui-dialog .ui-state-error { padding: .3em; }.validateTips { border: 1px solid transparent; padding: 0.3em; }</style><!--引入jquery类库文件  必须要有顺序-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
jquery-1.7.1.min.js下载地址：http://jqueryui.com/<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>jquery-ui-1.8.18.custom.min.js下载地址：http://jqueryui.com/
<!--css--><link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">$(function (){//这里获取一些需要用到的元素，并转换成jquery对象var name = $("#name"),password = $("#password"),email = $("#email"),//错误提示框的id元素validatetips = $(".validateTips"),allFields = $( [] ).add(name).add(password).add(email);//显示错误信息function prompt(t){//将拼接的错误信息添加到提示区validatetips.html(t).addClass( "ui-state-highlight" );// 该类修饰来自引进的css文件//一定时间后让该效果消失setTimeout(function (){validatetips.removeClass("ui-state-highlight",1500);}, 1000);}                //检测长度function checkLength(jqu,field,min,max){ //该参数分别为jquery对象， 要验证的字段， 最小长度， 最大长度if(jqu.val().length > min && jqu.val().length < max){//如果该字符串的长度在指定的范围内那么返回truereturn true;}else{//如果不在指定的范围内那么返回false,并且做出相应的提醒prompt(field+"字段的长度不在"+min+"和"+max+"之间");//改变被判断框的颜色jqu.addClass("ui-state-error");return false;}}//验证字符function checkRegexp( jqu, regexp, value ) {if ( !( regexp.test( jqu.val() ) ) ) {jqu.addClass( "ui-state-error" );prompt( value );return false;} else {return true;}}        $("#dialog-form").dialog({//这只自动打开窗口autoOpen:false,//打开窗口时的效果show:"explode",//关闭窗口时的效果hide:"explode",//是否显示遮罩效果modal:true,  //默认是不显示的//设置按钮buttons:[{text:"add",click:function (){//做一个验证标记，如果到最后该值还为true那么就执行添加操作，否则作出提示//清除一下样式allFields.removeClass( "ui-state-error" );var flag = true;flag = flag && checkLength(name,"name",2,6);flag = flag && checkLength(password,"password",3,7);flag = flag && checkLength(email,"email",6,50);flag = flag && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "对不起，名称必须是以字符开头！包含数字字母下划线" );// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/flag = flag && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "对不起，邮箱格式不正确！" );flag = flag && checkRegexp( password, /^([0-9a-zA-Z])+$/, "对不起，密码必须是0-9 a-z A-Z之间的字符！" );if(flag){//开始添加tr,td节点$("#users tbody").append("<tr><td>"+name.val()+"</td><td>"+email.val()+"</td><td>"+password.val()+"</td><td><a href='#'>delete</a></td></tr>");//添加删除事件del();//关闭窗口$( this ).dialog( "close" );}},},{    text:"close",click:function (){allFields.val( "" ).removeClass( "ui-state-error" );$(this).dialog("close");}}]});//为#dialog_link添加一个click事件，来打开一个窗口，该窗口的注册在上面    $("#create-user").button().click(function (){$("#dialog-form").dialog("open");});//删除字段function del(){$("#users a").click(function (){$(this).parents("tr").remove();});    }});
</script>
</head>
<body><div class="demo"><div id="dialog-form" title="Create new user"><p class="validateTips">All form fields are required.</p><form><fieldset><label for="name">Name</label><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><label for="email">Email</label><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><label for="password">Password</label><input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /></fieldset></form>
</div><div id="users-contain" class="ui-widget"><h1>个人信息添加</h1><table id="users" class="ui-widget ui-widget-content"><thead><tr class="ui-widget-header "><th>Name</th><th>Email</th><th>Password</th><th>Operate</th></tr></thead><tbody></tbody></table>
</div>
<button id="create-user">Create new user</button></div><!-- End demo -->
</body>
</html>

jquery-实现的添加个人信息加验证，附完全的注释，相信大家可以看懂相关推荐

凯撒密码：设想在某些情况下给朋友传递字条信息，但又不希望传递中途被第三方看懂这些信息，因此需要对字条信息进行加密处理
题目凯撒密码:设想在某些情况下给朋友传递字条信息,但又不希望传递中途被第三方看懂这些信息,因此需要对字条信息进行加密处理.凯撒密码采用了替换算法对信息中的每一个英文字符循环替换为该字符后面第三个字符 ...
u-boot-2012.04.01移植到TQ2440(七)：添加分区信息并启动jffs2文件系统
一.添加分区信息并启动jffs2文件系统烧写之前的内核看输出分区信息 TQ2440 # tftp 32000000uImage dm9000 i/o: 0x20000000, id:0x90000a ...
计算机毕业设计SSM本科培训班学员信息管理系统【附源码数据库】
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
ssm高校学生档案信息管理系统毕业设计- 附源码010936
ssm高校学生档案信息管理系统摘要在社会快速发展的影响下,教育事业蓬勃发展,大大增加了学校的数量.多样性.教育质量等要求,使教育的管理和运营比过去更加困难.依照这一现实为基础,设计一个快捷而又方便 ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
Asp.net+Jquery实现用户信息异步验证
用户注册信息验证在web开发中使用的非常多,只要涉及到用户注册,就会涉及到注册信息的验证.下面将介绍使用Jquery实现用户注册信息的验证,在这我就是以验证用户名是否已经在数据库中存在为例来介绍用户注 ...
html form提交增加请求头,怎么给jquery跨域post请求添加头部信息？
跨域,的整序大作站对近从体的家为宽应近从体的家服务器已开放请求接口,用$post可以成功,但是无法添加header信息,用$ajax的话会把post信息换成OPTIONS发送请求,data跟heade ...
Flask项目实战——10—(前台板块页面搭建、文本编辑页面搭建、发布帖子信息前验证权限、帖子模型搭建、发布帖子功能、帖子信息渲染到前后台页面)
1.前台板块页面搭建视图文件查询数据传输到前台界面:前台蓝图文件:apps/front/views.py 注意数据的收集方法和数据传输的类型. # -*- encoding: utf-8 -*- & ...
Flask项目实战——7—(Redis数据库存储验证码信息、验证登录界面的表单信息、注册功能实现、登录实现)
推荐一个API平台:聚合数据 1.Redis数据库存储验证码信息保存手机验证码到Redis数据库公有视图文件:apps/common/views.py # -*- encoding: utf-8 ...

jquery-实现的添加个人信息加验证，附完全的注释，相信大家可以看懂

jquery-实现的添加个人信息加验证，附完全的注释，相信大家可以看懂相关推荐

最新文章

热门文章