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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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"/>&nbsp;查看并同意<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>

转载于:https://www.cnblogs.com/shizhouyu/p/5189346.html

表单验证--插件-1.0.1相关推荐

  1. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  2. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  3. Validation-jQuery表单验证插件使用方法

    作用 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持. 使用前的布置 ...

  4. jQuery 表单验证插件,jQuery Validation Engine用法详解

    jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...

  5. 基于jQuery的表单验证插件:jValidate

    网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...

  6. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  7. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. html中表单的校验的插件,功能强大的jquery.validate表单验证插件

    本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...

  9. Validform实时表单验证插件实例使用

    文档日期:2016-10-17 适用范围:所有类型网站表单验证 插件版本:v5.3.2 插件地址:http://validform.rjboy.cn/Validform/v5.3.2/Validfor ...

最新文章

  1. 七、内存优化(4)性能计数器
  2. 【Paper】2020_多智能体系统的分布式故障估计方法研究
  3. 点到直线的投影公式_2021高考复习资料:高中数学必备公式与知识点汇总
  4. 深度学习进行目标识别的资源列表
  5. java基础---IO转换流
  6. 我们就要想办法的s9t9
  7. php生成excel范例,支持任意行列
  8. Nodejs cluster模块深入探究
  9. Struts2 注解模式
  10. 如何将字节数组转换为十六进制字符串,反之亦然?
  11. HTTP缓存ETAG和Last-Modified
  12. 怎么计算算法复杂度 big O
  13. xci转化nsp_Switch游戏XCI转NSP的教程+工具下载
  14. 水面反光如何拍摄_反光倒影的摄影怎么拍?
  15. 企业如何做好服务器防护45.113.201.1
  16. 计算三角形网格的tangent space
  17. 2015校园O2O商业模式解析——从物流切入
  18. 远程桌面退出后CPU过高的问题
  19. 深入理解Android系统网络架构
  20. 数理统计(matlab实现)

热门文章

  1. 华为5720设置静态路由不通_如何设置静态路由与网关?一文了解清楚
  2. JZOJ 5820. 【NOIP提高A组模拟2018.8.16】 非法输入
  3. JZOJ 5603. 【NOI2018模拟3.27】Xjz
  4. JZOJ 5221. 【GDOI2018模拟7.10】A
  5. mysql php页面流量统计_PHP学习笔记:php网络流量统计系统
  6. java获取当前周一_Java互联网架构-Spring IOC源码分析
  7. python算两个点的距离公式_计算Python Numpy向量之间的欧氏距离实例
  8. POJ 3263-Tallest Cow
  9. 最优布线问题(普里姆算法)
  10. webpack 图片压缩不起作用_理论|webpack2 终极优化