您的位置:首页 > 其它

表单验证--插件-1.0.1

2016-02-14 17:29 447 查看
1、html代码

<div class="reg">
<form action="" method="post" id="regForm" name="regForm" onsubmit="return false;">
<h1 class="reg-tit">10秒注册账号</h1>
<p id="fv_content"></p>
<ul class="clearfix">
<li class="fl">
<label class="fl">游戏账号</label>
<input type="text" maxlength="16" value="" id="user_name" name="user_name" class="fl inp" autocomplete="off" tabindex="1" datatype="/^[a-z][a-z0-9]{5,15}$/" url="/do/check_default.php" error="6-16位小写字母或数字,首位为字母" />
<div id="user_nameTip" class="onShow"> </div>
</li>
<li class="fl">
<label class="fl">登录密码</label>
<input type="password" value="" maxlength="16" id="user_pwd1" name="user_pwd1" class="fl inp" tabindex="2" datatype="/[a-z0-9]{8,16}/" error="8-16位字母或数字"/>
<div id="user_pwd1Tip" class="onShow"> </div>
</li>
<li class="fl">
<label class="fl">真实姓名</label>
<input id="user_realname" class="fl inp" type="text" autocomplete="off" maxlength="4" name="user_realname" tabindex="3" datatype="/^([\u4E00-\u9FA5]+,?)+$/" error="请输入真实姓名"/>
<div id="user_realnameTip" class="onShow"> </div>
</li>
<li class="fl">
<label class="fl">身份证号</label>
<input value="" maxlength="18" id="user_idcard" name="user_idcard" class="fl inp" tabindex="4" datatype="idcardVel" error="请输入身份证以保证合法"/>
<div id="user_idcardTip" class="onShow"> </div>
</li>
<li class="fl">
<label class="fl">安全邮箱</label>
<input type="text" value="" maxlength="50"  id="user_email" name="user_email" class="fl inp" tabindex="5" datatype="emailVel" error="请输入正确邮箱"/>
<div id="user_emailTip" class="onShow"> </div>
</li>
<li class="fl">
<label class="fl">验证码</label>
<input type="text" name="user_checkcode" id="user_checkcode" maxlength="4" class="fl inp" tabindex="6"/>
<img id="id_randimage" alt="看不清?重新换张!" class="fl" style="display:none;"/>
</li>
</ul>
<p class="reg-agree"><input id="check_agree" type="checkbox" name="check_agree" checked="checked"/> 查看并同意<a href="" target="_blank">《服务协议与隐私声明》</a></p>
<input type="submit" name="regsubmit" id="regsubmit" class="block public reg-submit" value="" title="立即注册"/>
<input type="hidden" value="ajax" id="submitType" name="submitType" />
<input type="hidden" name="act_id" id="act_id" value="11111111111"/>
<button id="xsubmit" value="/do/reg_server_j.php" style="display:none"></button>
</form>
</div>
<div class="reg-ok hide">
<h1 class="reg-tit">注册成功</h1>
<div class="public reg-ok-pic"></div>
<h2>登录游戏 领取588大礼包</h2>
</div>


2、js验证代码

<script src="js/jquery.min.js"></script>
<script>
var forms = {'id': 'regForm'};
function afterSubmit(result){
var data=eval('('+result+')');
$('#regSubmit').attr('disabled', false);
if(data.status == 1){
$('.reg').hide();
$('.reg-ok').show();
}else{
alert(data.msg);
$('#user_checkcode').val('');
regFormCon.getNewCode();
return false;
}
}
$(function(){
var regFormCon = {
flag:true,
checkCode:$('#user_checkcode'),
forms:$('#regForm'),
submit_btn:$('#regsubmit'),
tip:$('#fv_content'),
checkImg:$('#id_randimage'),
regAgree:$('#check_agree'),
xsubmit:$('#xsubmit'),
velInput:[],
velInFun:[],
val_l:[],
checkCodebind:function(){
this.checkCode.focus(function(){
if(regFormCon.flag){
regFormCon.checkImg.attr('src','/inc/validatecode.php?rnd=' + Math.random()).show();
regFormCon.flag = false;
}else{
return;
}
});
},
emailVel:function(val){
var pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(pattern.test(val)){
return true;
}
return false;
},
getNewCode:function(){
regFormCon.checkImg.attr('src', '/inc/validatecode.php?rnd=' + Math.random());
return false;
},
idcardVel:function(b) {
if (b.length == 15) {
if (this.isValidityBrithBy15IdCard(b)) {
if (this.getAgeByIdcard(b)) {
alert("您属于未满18周岁的未成年人,无法注册");
return false;
}
return true;
}
return false;
} else {
if (b.length == 18) {
var a = b.split("");
if (this.isValidityBrithBy18IdCard(b) && this.isTrueValidateCodeBy18IdCard(a)) {
if (this.getAgeByIdcard(b)) {
alert("您属于未满18周岁的未成年人,无法注册");
return false;
}
return true;
}
return false;
}
}
return false;
},
isTrueValidateCodeBy18IdCard: function(b) {
var c = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];
var a = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
var e = 0;
if (b[17].toLowerCase() == "x") {
b[17] = 10;
}
for (var d = 0; d < 17; d++) {
e += c[d] * b[d];
}
valCodePosition = e % 11;
if (b[17] == a[valCodePosition]) {
return true;
}
return false;
},
isValidityBrithBy18IdCard: function(b) {
var d = b.substring(6, 10);
var e = b.substring(10, 12);
var a = b.substring(12, 14);
var c = new Date(d,parseFloat(e) - 1,parseFloat(a));
if (c.getFullYear() != parseFloat(d) || c.getMonth() != parseFloat(e) - 1 || c.getDate() != parseFloat(a)) {
return false;
}
return true;
},
isValidityBrithBy15IdCard: function(d) {
var c = d.substring(6, 8);
var e = d.substring(8, 10);
var a = d.substring(10, 12);
var b = new Date(c,parseFloat(e) - 1,parseFloat(a));
if (b.getYear() != parseFloat(c) || b.getMonth() != parseFloat(e) - 1 || b.getDate() != parseFloat(a)) {
return false;
}
return true;
},
getAgeByIdcard: function(b) {
var f = new Date();
var e = b.length == 18 ? b.slice(6, 10) : 1900 + parseInt(b.slice(6, 8));
e = parseInt(e) + 18;
var g = b.length == 18 ? b.slice(10, 12) : b.slice(8, 10);
var c = b.length == 18 ? b.slice(12, 14) : b.slice(10, 12);
var a = e + "/" + g + "/" + c;
if (Date.parse(f) - Date.parse(a) == 0) {
return false;
}
if (Date.parse(f) - Date.parse(a) < 0) {
return true;
}
if (Date.parse(f) - Date.parse(a) > 0) {
return false;
}
return true;
},
filterInput:function(){
var fliterIn = this.forms.find('input');
var _l = this.forms.find('input').length;
for(var i=0;i<_l;i++){
if(!!fliterIn.eq(i).attr('datatype')){
fliterIn.eq(i).attr('issubmit','0');
this.val_l.push(fliterIn.eq(i));
if(!/\/.+\//.test(fliterIn.eq(i).attr('datatype'))){
this.velInFun.push(fliterIn.eq(i));
continue;
}
this.velInput.push(fliterIn.eq(i));
}
}
},
funcVel:function(){
if(this.velInFun){
for(var i = 0; i < this.velInFun.length; i++){
this.velInFun[i].bind('blur',function(){
var _this = $(this);
var datatype = _this.attr('datatype').toString();
var value = _this.val();
if(regFormCon[datatype](value)){
_this.attr('issubmit','1');
_this.next().addClass('onCorrect').removeClass('onError');
regFormCon.tip.text('');
}else{
_this.next().addClass('onError').removeClass('onCorrect');
regFormCon.tip.text(_this.attr('error'));
}
});
this.velInFun[i].bind('focus',function(){
var _this = $(this);
var value = _this.val();
regFormCon.tip.text(_this.attr('error'));
});
}
}
},
normalVel:function(){
if(this.velInput){
for(var i = 0; i < this.velInput.length; i++){
this.velInput[i].bind('blur',function(){
var datatype = eval($(this).attr('datatype'));
var url = $(this).attr('url');
var value = $(this).val();
var pattern = new RegExp(datatype);
var _this = $(this);
if(pattern.test(value)){
if(!!url){
$.ajax({
type: "GET",
url: url,
async:false,
data: 'clientid='+_this.attr('id')+'&user_name=' + value +'&_='+ new Date().getTime(),
error:function(){
_this.next().addClass('onError').removeClass('onCorrect');
regFormCon.tip.text(_this.attr('error'));
return false;
},
success: function(msg){
if(msg == 1){
_this.attr('issubmit','1');
_this.next().addClass('onCorrect').removeClass('onError');
regFormCon.tip.text('');
}else{
_this.next().addClass('onError').removeClass('onCorrect');
regFormCon.tip.text(_this.attr('error'));
return false;
}
}
});
}else{
_this.next().addClass('onCorrect').removeClass('onError');
regFormCon.tip.text('');
_this.attr('issubmit','1');
}
}else{
_this.next().addClass('onError').removeClass('onCorrect');
regFormCon.tip.text(_this.attr('error'));
return false;
}
});
this.velInput[i].bind('focus',function(){
var _this = $(this);
var value = _this.val();
regFormCon.tip.text(_this.attr('error'));
});
}
}
},
submit:function(){
var focusF = true;
for(var i = 0;i < regFormCon.val_l.length;i++){
if(regFormCon.val_l[i].attr('issubmit') == '1'){
regFormCon.val_l[i].next().addClass('onCorrect').removeClass('onError');
this.tip.text('');
continue;
}else{
regFormCon.val_l[i].next().addClass('onError').removeClass('onCorrect');
if(focusF){
              this.tip.text(regFormCon.val_l[i].attr('error'));
regFormCon.val_l[i].focus();
focusF = false;
}
if(i == regFormCon.val_l.length-1){
return false;
}
}
}
if(this.checkCode.val() == '' || this.checkCode.val().length < 4){
this.tip.text('验证码格式不正确!');
this.checkCode.focus();
this.getNewCode();
return false;
}
if(!(this.regAgree.attr('checked'))){
alert('您必须同意该协议才能继续注册');
this.getNewCode();
return false;
}
return true;
},
init:function(){
var _this = this;
_this.checkCodebind();
_this.filterInput();
_this.funcVel();
_this.normalVel();
regFormCon.checkImg.click(function(){
_this.getNewCode();
});
_this.submit_btn.click(function(){
if(_this.submit()){
_this.xsubmit.get(0).click();
}
});
}
};
regFormCon.init();
});
</script>
<script src="/webtool/webtool.nocache.js"></script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: