jquery 表单验证之通过 class验证表单不为空


Posted in Javascript onNovember 02, 2015

在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护。

本章将介绍如何利用jQuery,通过为表单配置class进行统一验证。(ID一个页面只可以使用一次;class可以多次引用)

1:为input添加class,名字可以随意设置,但每个input需要保持一致,本章案例calss设置为noNull。(若input已有class属性,可直接加到其后)

2:为input添加一个属性,用来后期通过jquery获取该字段,用作提示语。本章案例提示属性为notNull。

3:通过jQuery遍历页面中所有calss为noNull的表单,验证其是否为空,若为空,通过获取notNull的字段,进行为空提示。

具体如何设置,请参照下面的案例。本章针对input,radio,select,checkbox等类型都进行了阐述。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
       性别:
       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
       女<input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
        年龄:
        <select name="age" class="noNull" notNull="年龄">
          <option value ="">请选择</option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
        兴趣:
        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
        唱歌<input type="checkbox" name="hobby" value="2">
        跳舞<input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  </form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull')+"不能为空");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='"+name+"']:checked").size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="'+name+'"]:checked').size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>

下面给大家介绍jquery.validate.js验证插件

jquery.validate.js是jquery旗下的一个验证插件,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。

举个例子,有这么一个表单:

<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

在这个表单中,有名、姓、用户名、密码、确认密码和email。他们都为非空,并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用jQuery验证最简单的方式是引入jquery.js和jquery validation.js两个js文件。然后分别在input中加入class即:

<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

以下列出validate自带的默认验证

required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")

  然后,在document的read事件中,加入如下方法:

<script>
    $(document).ready(function(){
        $("#signupForm").validate();
    }
   </script>

这样,当form被提交的时候,就会根据input指定的class来进行验证了。如果失败,form的提交就会被阻止。并且,将提示信息显示在input的后面。

不过,这样感觉不好,因为验证规则侵入了我们的html代码。还有一个方式,便是使用“rules”。我们将input的那些验证用class删除掉。然后修改document的ready事件响应代码:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})

这样以来,也能达到相同的效果。

    那么,接下的问题,就是显示的错误提示是默认的。我们需要使用自定义的提示:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

如果你还想在错误信息上显示特别的样式(比如字体为红色)即可通过添加:

<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

继续添加对输入密码长度的验证规则:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

使用remote

可以通过event指定触发效验方式(可选值有keyup(每次按键时),blur(当控件失去焦点时),不指定时就只在按提交按钮时触发)

$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})

如果通过指定debug为true则表单不会提交只能用来验证(默认为提交),可用来调试

$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})

如果在提交前还需要进行一些自定义处理使用submitHandler参数

$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})
Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 #Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 #Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 #Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP中cookies使用指南
2007/03/16 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python django集成cas验证系统
2014/07/14 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
师范毕业生自荐信
2013/10/17 职场文书
信息管理专业推荐信
2013/10/29 职场文书
勾股定理课后反思
2014/04/26 职场文书
残疾人小组计划书
2014/04/27 职场文书
校车安全管理责任书
2015/05/11 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript