【封装为表单验证的专用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. Android - Style问题

    转自:http://jingyan.baidu.com/article/c910274be7536acd361d2dca.html 转自:http://blog.sina.com.cn/s/blog_ ...

  2. B-J UI框架(前端异步框架)

    B-JUI 客户端框架 http://xiangzhanyou.com/B-JUI

  3. Qt监控后台服务运行状态

    mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QMa ...

  4. 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之LayerColor(8)

    在前面文章中讲述了Cocos2d-x引擎OpenGL渲染准备Shader方面,本文主要讲解使用LayerColor来讲述OpenGL的渲染过程. 1.LayerColor对象创建 添加LayerCol ...

  5. system times on machines may be out of sync

    今天在hadoop集群执行任务的时候报了一个这个错误,听名字应该是三台机器的时间不同步.于是同步一下时间即可解决 1.安装ntpdate工具 yum -y install ntp ntpdate 2. ...

  6. IOS strong和weak的区别

    strong和weak的区别 strong表示保留它指向的堆上的内存区域不再指向这块区域了. 也就是说我强力指向了一个区域,我们不再指向它的条件只有我们指向nil或者我自己也不在内存上,没有人stro ...

  7. poj_1390 动态规划

    题目大意 将一些连续的序列根据颜色分为N段,每段有颜色 为 Ci, 长度为 Li.每次点击其中的一段 i ,则可以将该段i消除,该段相邻的两段自动连接到一起,如果连接到一起的两段之前的颜色相同,则更新 ...

  8. OpenGL ES2学习笔记(6)-- Line Strip和Line Loop

    Line Strip 上一篇文章画了两条线段,但是用了4个点.如果几条线段首尾相接的话,可以让OpenGL把他们当成Line Strip来画,这样就可以用n+1个点来画n条线段. 代码 import ...

  9. 通过身份证分析出生年月日、性别、年龄的SQL语句

    ),) ) ),)<>'X' ) ) )<>'X' ),)),)),)) ),)),)),)) ) as int)) where [出生日期]<>'' #字符串格式 ...

  10. JZOJ.5328【NOIP2017模拟8.22】世界线

    Description