注：本例子是参照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){
//如果该字符串的长度在指定的范围内那么返回true
return 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>
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
