【封装为表单验证的专用js,所有表单页面都可以调用】

1、表单

<form id="regForm" method="post" action="index/register" onsubmit="checkForm(this)">
....
<td><label class="ui-green"><input type="submit" name="submit" value="提交注册" /></label></td>

2、验证form表单

function checkForm(frm)
{ var els = frm.getElementsByTagName("input");
for(var i=0; i<els.length; i++) {
if(typeof(els[i].getAttribute("onblur")) == "function") {
if(!CheckItem(els[i])) return false;
}
}
return true;
}

3、验证该表单下的所有input框

function CheckItem(obj)
{
//将input提示框的内容赋空
obj.parentNode.parentNode.className = ""; var msgBox = obj.parentNode.getElementsByTagName("span")[0];
switch(obj.name) { case "regUserName": //这后面的业务可以单独提出来作为一个方法
if(obj.value == "") {
msgBox.innerHTML = "密码不能为空!";
//添加className方便统一管理样式
msgBox.className = "error";
return false;
}else{
//用户名被占用
$.ajax({
"url":"index/hasname",
"data":"username="+obj.value,
"type":"post",
"dataType":"json",
"success":function(data){
if(data=="1"){
msgBox.innerHTML = "用户名已存在!";
msgBox.className = "error";
return false;
}else{
//用户名可用
msgBox.innerHTML = "用户名可用!";
msgBox.className = "nameinfo";
}
}
});
}
break; case "userName":
if(obj.value == "") {
msgBox.innerHTML = "密码不能为空!";
msgBox.className = "error";
return false;
}
break;
case "passWord":
if(obj.value == "") { msgBox.innerHTML = "密码不能为空!";
msgBox.className = "error";
return false;
}
break;
case "rePassWord":
if(obj.value == "") {
msgBox.innerHTML = "密码不能为空!";
msgBox.className = "error";
return false;
} else if(obj.value != document.getElementById("passWord").value) {
msgBox.innerHTML = "两次密码不一致!";
msgBox.className = "error";
return false;
}
break;
case "veryCode":
if(obj.value == "") {
msgBox.innerHTML = "验证码不能为空!";
msgBox.className = "error";
return false;
}
break;
}
return true;
}

表单验证—js循环所有表单验证的更多相关文章

  1. day32(表单校验js和jquery表单校验)

    校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...

  2. 查询数据表行数 然后循环查找表 添加数据到ITEMS

    ;i<tbBiao.Rows.Count;i++) { string TableName = (tbBiao.Rows[i]["Table"]).ToString(); tb ...

  3. js/jquery/插件表单验证

    媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...

  4. 在客户端先通过JS验证后再将表单提交到服务器

    问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...

  5. jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  6. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  7. 原生js制作表单验证,基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  8. JS中的表单验证+正则表达式

    表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...

  9. 最常用的15个前端表单验证JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

随机推荐

  1. 第七篇:Logistic回归分类算法原理分析与代码实现

    前言 本文将介绍机器学习分类算法中的Logistic回归分类算法并给出伪代码,Python代码实现. (说明:从本文开始,将接触到最优化算法相关的学习.旨在将这些最优化的算法用于训练出一个非线性的函数 ...

  2. [直观学习排序算法] 视觉直观感受若干常用排序算法 以及 iOS 资料

    http://www.zhfish.net/?s=点击范围 1 快速排序 介绍: 快速排序是由东尼·霍尔所发展的一种排序算法.在平均状况下,排序 n 个项目要Ο(n log n)次比较.在最坏状况下则 ...

  3. my97datepicker 怎么设置页面加载时默认值为当天时间

    Demo示例如下:<script language="javascript" type="text/javascript" src="My97D ...

  4. Android英文文档翻译系列(1)——AlarmManager

      原文:个人翻译,水平有限,欢迎看官指正.                                                              public class Ala ...

  5. 心脏滴血HeartBleed漏洞研究及其POC

    一.漏洞原理: 首先声明,我虽然能看懂C和C++的每一行代码,但是他们连在一起我就不知道什么鬼东西了.所以关于代码说理的部分只能参考其他大牛的博客了. /* 据说源码中有下面两条语句,反正我也没看过源 ...

  6. fluentValidation集成到autofac

    废话不说直接上代码 // 首先实现ValidatorFactory public class DependencyResolverValidatorFactory : ValidatorFactory ...

  7. 【BZOJ4523】[Cqoi2016]路由表 Trie树模拟

    [BZOJ4523][Cqoi2016]路由表 Description 路由表查找是路由器在转发IP报文时的重要环节.通常路由表中的表项由目的地址.掩码.下一跳(Next Hop)地址和其他辅助信息组 ...

  8. iOS面试2

    转:http://www.cocoachina.com/ios/20151106/14069.html 作者:seedante 授权本站转载. 题目来自博客:面试百度的记录,有些问题我能回答一下,不能 ...

  9. redis运维常用的server端命令

    TIME 查看时间戳与微秒数 DBSIZE 查看当前库中的key数量 BGREWRITEAOF 后台进程重写AOF BGSAVE 后台保存rdb快照 SAVE 保存rdb快照 LASTSAVE 上次保 ...

  10. SQL中distinct的用法(转载)

    1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出不同(distinct)的值.关键词 ...