技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
注册表单插件-----关键是同步异步的控制
DEMO: http://6yang.net/myjavascriptlib/regForm/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表单插件-----关键是同步异步的控制</title>
</head>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javaScript">
~function(){
$.fn.regModule = function( arr ){
var selfObj = $(this),
checkRet = true,
isAll,
regEprFuc = function(type, value, msg, ajax, objVal){
this.regEpr = {
en:/^[a-z]+$/i, //匹配英文
cn:/^[u4e00-u9fa5]+$/, //匹配中文
num:/^-?d+(?:.d+)?$/, //匹配数字（包括小数点）
int:/^-?d+$/, //匹配整数
sint:/^(0|[1-9]d*)$/, //匹配正整数
pint:/^d+$/, //匹配纯数字
uid:/^[a-z][a-z0-9_]*$/i, //匹配登陆账号(字母开头，接数字、字母、下划线),
password:/^[@A-Za-z0-9!#$%^&*.~]{6,22}$/, //匹配登陆密码(字母开头，接数字、字母、下划线)
zipcode:/^[1-9]d{5}$/, //匹配邮编(6位，首位不为零）
qq:/^[1-9][0-9]{4,9}$/, //匹配QQ号（5到10位，首位不为零）
email:/^[w-]+(.[w-]+)?@[w-]+(.[w-]+){1,3}$/, //匹配电子邮箱,比如:61114579@qq.com或li.kaituan@vip.qq.com等
url:/^http://[w-]+(.[w-]+)+/?.*$/i, //匹配网址
mobile:/^(13|15|18)d-?d{8}$/, //匹配手机号码13/15/18开头的前3位+后8位，之间可加杠
tel:/^d{3,4}-?d{7,8}(-d{1,5})?$/, //匹配固定电话号码，限国内，前3到4位+后7到8位，之间可加杠,分机号前必须加杠，最多5位
phone:/^(13|15|18)d-?d{8}$|^d{3,4}-?d{7,8}(-d{1,5})?$/, //电话，手机和固定电话之一
ip:/^(([01]?[d]{1,2})|(2[0-4][d])|(25[0-5]))(.(([01]?[d]{1,2})|(2[0-4][d])|(25[0-5]))){3}$/, //IP地址
checkcode:/^(d|[a-z]){4}$/, //匹配验证码（4位数字）
//idcard:/^d{15}$|^d{17}(?:d|X)$/, //匹配身份证（15或18位）
car:/^[u4e00-u9fa5][A-Z][A-Z0-9]{5}$/, //匹配车牌
bir:/^(19|20)dd(0[1-9]|1[0-2])([012][1-9]|3[01])$/ //匹配8位数的生日，1900-2099年间
};
this.msg = '';
this.checkValidate = function(){
if(this.regEpr.hasOwnProperty(type)){
if(!(this.regEpr[type]).test(value)){
this.msg = msg.attention;
checkRet = false;
return false;
}else{
this.msg = '';
return true;
}
}
};
this.checkValidate();
// ajax callback
this.ajaxCallback = function(){
var self = objVal,
selfVal = $(eval("'"+'.' + self.class + "'"), selfObj);
$.ajax({
type: "POST",
url: ajax.url,
data: {'txtRegCheckcode': value},
async : !isAll,// false使用同步方式执行AJAX，true使用异步方式执行ajax
dataType: "json",
success: function(data){
if(data.status == 'successful'){
selfVal.parent().find('.msg').html(msg.ok);
}else if(data.status == 'failed'){
checkRet = false;
selfVal.parent().find('.msg').html(msg.error);
}else{
checkRet = false;
}
return this;
}
});
}
return this;
};
// 检查第个元素
var fieldCheck = function(val){
var selfVal = $(('.' + val.class), selfObj);
var selfFiled = new regEprFuc(val.type, selfVal.val(), val.msg, val.ajax, val);
if(val.ajax && selfFiled.checkValidate()){
selfFiled.ajaxCallback();
}else{
selfVal.parent().find('.msg').html(selfFiled.msg);
}
},
// 元素组验证是否全通过
validate = function(settings){
checkRet = true;
$.each(settings, function(key, val){
isAll=true;
fieldCheck(val);
});
return checkRet;
};
// 绑定input
$.each(arr, function(key, val){
$(('.' + val.class), selfObj)
.bind('blur', function(){
var self = $(this);
if(!val.ajax){
val.ajax = null;
}
isAll=false;
var selfFiled = new regEprFuc(val.type, self.val(), val.msg, val.ajax, val);
self.parent().find('.msg').html(selfFiled.msg);
})
.bind('keydown keyup', function(){
var self = $(this);
var selfFiled = new regEprFuc(val.type, self.val(), val.msg, null, val);
self.parent().find('.msg').html(selfFiled.msg);
})
});
return this.each(function(){
//提交事件绑定
selfObj.submit(function(e){
e.preventDefault();
if (validate(arr)){//验证通过-ajax提交数据
alert('Post the form')
}
return false;
});
});
}
}(jQuery);
$(function() {
$('#js_regWrap').regModule({
'username' : {
class : 'txt_username',
type : 'uid',
msg : {
attention: '字母开头，接数字、字母、下划线.',
error: '字母开头，接数字、字母、下划线.',
ok: ''
}
},
'password' : {
class : 'txt_password',
type : 'password',
msg : {
attention: '大于等于6密码，要字母和文字组合成.',
error: 'Check your password.',
ok: ''
}
},
'phone': {
class : 'txt_phone',
type : 'phone',
msg : {
attention: '匹配电话,比如:13585697555等',
error: 'Check your phone.',
ok: ''
}
},
'email' : {
class : 'txt_email',
type : 'email',
msg : {
attention: '匹配电子邮箱,比如:demo@qq.com等',
error: 'Check your password.',
ok: ''
}
},
'checkCode' : {
class : 'txt_checkCode',
type : 'checkcode',
msg : {
attention: '匹配验证码（4位数字）',
error: 'Check your CheckCode.',
ok: ''
},
ajax : {
url: 'ajaxCheckNumber.php',
data: [],
callback: function(json){
//
}
}
}
});
//code change
$(".icoCheckcode").click(function(){
$(this).attr("src",'checknumber.php?' + Math.random());
});
});
</script>
<style type="text/css">
body{
font:12px/1.5 Verdana, Geneva, sans-serif;
}
.regWrap{
margin:0 auto;
width:500px;
}
.regWrap .labelLine,
.regWrap .btnWrap{
clear:both;
padding:5px 0;
}
.regWrap .labelLine label{
width:100px;
}
.regWrap .labelLine input{
width:150px;
}
.regWrap .labelLine label,
.regWrap .labelLine input,
.regWrap .labelLine .code_img{
float:left;
vertical-align:middle;
}
.regWrap .labelLine .msg{
float:left;
padding:0 0 0 15px;
vertical-align:middle;
}
.regWrap .labelLine .msg{
color:#f30;
}
.regWrap .labelLine .code_img{
padding:0 0 0 3px;
}
.countLa img{
border:0;
width:0;
height:0;
}
</style>
<body>
<div class="regWrap">
<form action="test.php" method="post" id="js_regWrap">
<p class="labelLine"><label>Username</label><input type="text" class="txt_username" /><span class="msg"></span></p>
<p class="labelLine"><label>Password</label><input type="password" class="txt_password" /><span class="msg"></span></p>
<p class="labelLine"><label>Phone</label><input type="text" class="txt_phone" /><span class="msg"></span></p>
<p class="labelLine"><label>Email</label><input type="text" class="txt_email" /><span class="msg"></span></p>
<p class="labelLine"><label>Code shown</label><input type="text" maxlength="4" class="txt_checkCode" /> <span class="code_img"><img src="checknumber.php" class="icoCheckcode" alt="" /></span><span class="msg"></span></p>
<div class="btnWrap">
<input type="submit" value="submit" class="btnSubmit" />
</div>
</form>
</div>
<div class="countLa"><script language="javascript" type="text/javascript" src="http://js.users.51.la/1745893.js"></script></div>
</body>
</html>