使用jquery.validate.js插件进行表单里控件的验证
jsp中具体实现的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> <script src="jquery-2.1.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************/
//自定义的方法：
/*
* $.validator.addMethod("af",function(value,element,params)
* * af：增加的方法的名称
* * function(value,element,params)
* * value 元素的值
* * element 元素本身
* * params 默认值
*/
$.validator.addMethod("cartlength",function(value,element,params){
//alert(value+" "+element+" "+params);
var len = value.length;
if(len!=15 && len!=18){
return false;
}
return true;
}); /*************************************************************************/ //验证15位身份证是否符合要求
$.validator.addMethod("cartlength15",function(value,element,params){
var len = value.length;
if(len == 15){
var pattern=/^\d{15}$/;
if(pattern.test(value)){
return false;
}
}
return true;
});
/*************************************************************************/
//验证18位身份证是否符合要求
$.validator.addMethod("cartlength18",function(value,element,params){
var len = value.length;
if(len == 18){
var pattern=/^\d{18}$/;
if(pattern.test(value)){
return false;
}
}
return true;
});
//window.onload();
$(document).ready(function() {
//调用验证方法
$("#exForm").validate({
/*************************************************************************/
//验证规则
rules:{
realname:{ //注意：每个字段是dom元素节点的名称name,不是id
required:true,
maxlength:8,
minlength:2
},
pwd:{
required:true,
minlength:6,
maxlength:16
},
pwd1:{
required:true,
minlength:6,
maxlength:16,
equalTo:("#pwd")
},
gender:{
required:true
},
sex:{
required:true,
range:[26,50]
},
edu:{
required:true
},
birthday:{
required:true,
date:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
cart:{
required:true,
cartlength:"5",
cartlength15:"15", //使用自定义的方法验证
cartlength18:"18" //使用自定义的方法验证
}
},
/*************************************************************************/
//显示验证出错的提示信息
messages:{
realname:{
required:"您的姓名不能为空",
maxlength:"您的姓名长度不大于8位字符",
minlength:"您的姓名长度不小于2位字符"
},
pwd:{
required:"您输入的密码不能为空",
minlength:"您输入的密码不能少于6位",
minlength:"您输入的密码不能多于16位"
},
pwd1:{
required:"您确认输入的密码不能为空",
minlength:"您确认输入的密码不能少于6位",
minlength:"您确认输入的密码不能多于16位",
equalTo:"您两次输入的密码不一致"
},
gender:{
/*
*
*/
},
sex:{
required:"年龄不能为空",
range:"年龄介于26到50岁之间"
},
edu:{
required:"请选择您的学历"
},
birthday:{
required:"出生日期不能为空",
date:"出生日期格式不正确"
},
checkbox1:{
// required:""
},
email:{
required:"电子邮箱 不能为空",
email:"电子邮箱格式不正确"
},
cart:{
required:"身份证不能为空",
cartlength:"身份证长度只能是15位或者18位",
cartlength15:"15位身份证输入有误",
cartlength18:"18位身份证输入有误"
}
}
/*************************************************************************/
});
}); </script>
</head>
<body>
<form action="" id="exForm" name="exForm">
<center>
<h1>验证信息</h1>
<table border="1">
<tr>
<td>真实姓名(不能为空)</td>
<td><input type="text" id="realname" name="realname"/></td>
</tr>
<tr>
<td>请输入您的密码(密码6-16位)</td>
<td><input type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td>请确认输入您的密码(密码6-16位)</td>
<td><input type="password" id="pwd1" name="pwd1"></td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="radio" id="m" name="gender"/>男
<input type="radio" id="f" name="gender"/>女
<label style="display: none;" for="gender" class="error">请选择性别</label>
</td>
</tr>
<tr>
<td>年龄(26-50)</td>
<td><input type="text" id="sex" name="sex"/></td>
</tr>
<tr>
<td>您的学历</td>
<td>
<select id="edu" name="edu">
<option value="">---请选择您的学历--</option>
<option value="a">小学</option>
<option value="b">初中</option>
<option value="c">高中</option>
<option value="d">大学</option>
<option value="e">研究生</option>
<option value="f">硕士生</option>
<option value="g">博士生</option>
</select>
</td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="text" id="birthday" name="birthday"/></td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="q1"/>乒乓球
<input type="checkbox" name="checkbox1" id="q2" value="q2"/>羽毛球
<input type="checkbox" name="checkbox1" id="q3" value="q3"/>篮球
<input type="checkbox" name="checkbox1" id="q4" value="q4"/>旅游
<label style="display: none;" for="checkbox1" class="error">至少选择一个兴趣爱好</label>
</td>
</tr>
<tr>
<td>电子邮箱</td>
<td><input type="text" id="email" name="email"/></td>
</tr>
<tr>
<td>身份证(必须是15位或者18位)</td>
<td><input type="text" id="cart" name="cart"></td>
</tr>
</table>
<input type="submit" value="提交"/>
</center>
</form>
</body>
</html>
实现的效果图：
使用jquery.validate.js插件进行表单里控件的验证的更多相关文章
- jquery.validate.js之自定义表单验证规则
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jQuery Validate 插件为表单提供了强大的验证功能
之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
- jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
- js如何遍历表单所有控件
js如何遍历表单所有控件 一.总结 一句话总结: 1.获取form表单里面的的所有元素:通过formelement.elements,这里form元素通过name属性直接定位 var fele=for ...
- 【ASP.NET 基础】表单和控件
1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jquery.form.js（ajax表单提交）
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
随机推荐
- 使用Guava进行函数式编程
本文翻译自Getting Started with Google Guava这本书,如有翻译不足的地方请指出. 在这一章,我们开始注意到使用Guava进行编写代码会更加简单.我们将看看如何使用Guav ...
- 最近对Memcache的一些学习
首先,Memcache是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度,再特别强调下:M ...
- ngx-push-stream模块源码学习（四）——订阅
一.概述 push stream模块允许三种模式的订阅者: longpolling:每收到服务端响应数据即断开连接然后迅速重连,连接耗时可以忽略 stream:与服务端保持长连接,持续不断的请求-&g ...
- Ubuntu13.04 安装Redmine
先从GitLab说起 GitLab自带的issue管理虽然在不断的改进,但是从功能上来看缺少很多东西,比如issue的排序没有,GitLab自动的将已经close的issue放在下面,open的放在上 ...
- 深入浅出MyBatis-Sqlsession
前面的章节主要讲mybatis如何解析配置文件,这些都是一次性的过程.从本章开始讲解动态的过程,它们跟应用程序对mybatis的调用密切相关.本章先从sqlsession开始. 创建 正如其名,Sql ...
- JVM参数设置、分析
不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java ...
- OOAD（面向对象分析和设计）GRASP之创建者模式（Creator）又称生成器模式学习笔记
说OOAD是一门玄学,一点都不为过.又或许是因为我之前一直没有很好的建立面向对象的思想,更有可能是因为练得不够多...总之,一直没能很好理解,哪怕把一本叫做<UML和模式应用>的书翻来覆去 ...
- [ios-必看] iOS 下实现解压缩
http://blog.csdn.net/lyy_whg/article/details/11971581 http://blog.sina.com.cn/s/blog_833996210100udk ...
- 浅谈Web前端浏览器兼容问题
对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...
- .NET 同步与异步之锁（Lock、Monitor）（七）
本随笔续接:.NET同步与异步之相关背景知识(六) 在上一篇随笔中已经提到.解决竞争条件的典型方式就是加锁 ,那本篇随笔就重点来说一说.NET提供的最常用的锁 lock关键字 和 Monitor. 一 ...