【封装为表单验证的专用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. swift - 之 UICollectionView的用法/自定义流布局

    具体代码如下: 1.声明 var hCollectionView:UICollectionView? var layout:UICollectionViewFlowLayout? let course ...

  2. EasyUI 每页展示100条数据

    $(function() { //$("#bgAddTime").datebox("setValue", getTimeString()+" 00:0 ...

  3. ubuntu下Eclipse创建Django项目

    (注:部分过程可能需要FQ) Eclipse版本:Mars.x 点击help->Eclipse Marketplace,搜索“PyDev”并下载安装. 然后选择window->prefer ...

  4. Hadoop学习之路

    Hadoop是谷歌的集群系统的开源实现: -google集群系统:GFS.MapReduce.BigTable -Hadoop主要由HDFS(hadoop distrubuted file syste ...

  5. java基础---->多线程之wait和notify(八)

    这里学习一下java多线程中的关于wait方法和notify方法的用法.命运不是风,来回吹,命运是大地,走到哪你都在命运中. wait和notify方法的使用 一.wait与notify的简单实例 i ...

  6. JS-倒计时效果

    团购-限时抢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. 关于Java中按值传递和按引用传递的问题详解

    写了两个方法,一个是多关键字的快速排序,一个是基于多关键字的基速排序.两个方法的参数列表是一样一样的,但是快速排序正常工作,但是基数排序传出来的参数一点没有改变,苦思冥想了半天也没想通是怎么回事,于是 ...

  8. 图片上传转base64

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  9. 【Android】Android Theme的设置

    在AndroidManifest.xml文件中,可以对每一个Activity设置android:theme theme的设置 可以设置为系统自带的格式,也可以自定义格式. A: 系统自带格式 @and ...

  10. thymeleaf 学习笔记-基础篇(中文教程)

    (一)Thymeleaf 是个什么?      简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...