使用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 ...
随机推荐
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇（用户管理功能的实现）
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现) 一.前三篇的内容是否对您有帮助呢?如果有的话,请您继续关注这篇吧,这篇主要是实现”用户管理“的 ...
- Java学习笔记——Java程序运行超时后退出或进行其他操作的实现
当程序进入死循环或者由于其他原因无法自行终止的时候,就需要强制退出程序了. 对于开发软件 Eclipse ,在程序执行超时后,可以点击 Terminate 按钮强制退出. 那么,我们可不可以通过程序设 ...
- Mac下quick-cocos2d-x player 无法运行解决方案
今天打算在Mac开发我的游戏,因为游戏用的2.2.5版的player,没有安装版.在Mac上运行player时提示player文件已经损坏. 解决方法:在shell下执行如下指令即可 mv $QUIC ...
- Machine Learning/Introducing Logistic Function
Machine Learning/Introducing Logistic Function 打算写点关于Machine Learning的东西, 正好也在cnBlogs上新开了这个博客, 也就更新在 ...
- asp.net 上传文件
文件上传实例 公司产品中一直是采用 flash 实现文件上传功能,但用户的需求多了以后遇到了越来越多难以解决的问题,最后试着用硕正提供的freeform.小型页面控件来解决. 硕正文件上传的实现途径有 ...
- DirectX11 SDK下载地址
http://download.microsoft.com/download/F/1/7/F178BCE4-FA19-428F-BB60-F3DEE1130BFA/DXSDK_Feb10.exe 拿走 ...
- WPF界面设计
WPF仿360卫士9.0界面设计 Chrome插件——一键保存网页为PDF1.0 http://www.cnblogs.com/bdstjk/p/3163723.html 仿照网上的一个代码写的, ...
- 添加第三方类库造成的Undefined symbols for architecture i386:编译错误
1.原因: 如果是源码编译的话,一般就只某些头文件没有添加到src编译里面.但是对于添加库编译,一般是库的编译路径设置不正确(比如arm的版本.模拟器或者真机的不同版本库引用错误或者重复引用一起编译器 ...
- 使用 IDEA 创建 Maven Web 项目 （二）- 搭建 WEB 项目框架
转为 Java Web 项目 将上一节中创建的 Maven 项目调整为 WEB 项目结构,步骤如下: 在 main 目录下,添加 webapp 目录. 在 webapp 目录下,添加 WEB-INF ...
- Swift之父Chris Lattner将从Apple离职，加入特斯拉
1月10日,Swift编程语言之父 Chris Lattner 在 swift-evolution 邮件列表中宣布,他将于本月底离开 Apple,Ted Kremenek 将接替他成为 Swi ...