使用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 ...
随机推荐
- eclipse plugin 导出插件包
当我们的插件在完成一个阶段性开发的时候,我们要发布一个1.0的版本.这个时候会碰到一个问题.如何把我们的插件打成包?有多种途径,下面具体讨论一下. 首先从插件完成到被他人(或者我们自己)使用有两个步骤 ...
- IOS中KVO模式的解析与应用
IOS中KVO模式的解析与应用 最近老翁在项目中多处用到了KVO,深感这种模式的好处.现总结如下: 一.概述 KVO,即:Key-Value Observing,它提供一种机制,当指定的对象的属性被修 ...
- QQ空间如何显示相片
QQ空间如何显示相片 前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题, ...
- 彩蛋 Python之道
彩蛋 Python之道 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 使用下面的语句可以调出Python中的一个彩蛋, impo ...
- outlook gmail setting
smtp.gmail.com pop.gmail.com SMTP服务器端口 465 要求安全连接打钩 POP3服务器端口 995 要求安全连接打钩
- iOS抽奖程序
iOS抽奖程序 代码下载地址: http://vdisk.weibo.com/s/HKehU http://pan.baidu.com/share/link?shareid=893330225& ...
- Excel单元格所在的行和列变色
网友问到如何通过移动光标选择单元格,所在的行和列变色.如每次输入价格的时候,想想在横竖方向上有颜色标识,这样方便对照输入价格 . 这里可以使用窗体的Worksheet_SelectionChange ...
- Django Function Based View（FBV）和Class Based View （CBV）对比
一.FBV处理过程 首先来看一下FBV逻辑过程: 1.简单过程(借用官方示例): urls: from django.conf.urls import url from . import views ...
- 简介alert()与console.log()的不同
简单的说alert 是弹出提示而console.log是在调试工具里打日志,下面具体给大家列出alert()与console.log()的不同点, [1]alert() [1.1]有阻塞作用,不点击确 ...
- React一些必须要知道的基础
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...