使用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 ...
随机推荐
- 关于JdbcTemplate的queryForList返回值
通过spring的jdbctemplate返回的list其实封装的是需要通过如下方法得到里面的内容的 public void getAllUsers() { List allUsers = new A ...
- Apache遇到的问题：APR not found
#./configure --prefix……检查编辑环境时出现: checking for APR... no configure: error: APR not found . Please r ...
- 【Win32API】SendInput ERROR_BUSY 错误原因
最近需要解决一个Windows上模拟键盘输入的问题, 使用SendInput这个API来实现的.当我从另外一台机器给当前机器发送一条键盘指令时,发现SendInput一直是成功的,但是没有看到任何输入 ...
- 基于libgdx游戏引擎开发的飞天猫
闲来没事学学游戏,这是鄙人第一个小游戏——飞天猫 1,基于Android开发的小游戏,至少Android2.2以上的系统. 2,界面简洁,美观,游戏易操作,上手快. 3,可以左右摇摆手机来改变飞天猫的 ...
- hdu3579 Hello Kiki（数论）
用到中国剩余定理,然后用扩展欧几里得算法求解. 这里有两个注意点,1.硬币数量不能为0或者负数 2.每个group数量有可能大于50,样例中就有 #include<stdio.h> #in ...
- SQL 两表关联查询 where 条件中等号两端字段顺序对效率的影响
现有两表A(大).B(小)作关联查询,SQL语句如下: SQL1:select * from A,B where A.id = B.id SQL2:select * from A,B where B. ...
- js区分汉字和字符，校验长度
遇到这么一个问题, 长度限制输入150个英文字符(小于等于150个英文字符长度),超出则直接禁止输入,并提醒:摘要输入必须小于等于75个中文字符长度! 长度校验倒是没问题,但是要区分汉字还是英文 ...
- MVC源码解析 - UrlRoutingModule / 路由注册
从前面篇章的解析, 其实能看的出来, IHttpModule 可以注册很多个, 而且可以从web.config注册, 可以动态注册. 但是有一个关键性的Module没有讲, 这里就先来讲一下这个关键性 ...
- [bzoj4540][Hnoi2016][序列] (莫队算法+单调栈+st表)
Description 给定长度为n的序列:a1,a2,…,an,记为a[1:n].类似地,a[l:r](1≤l≤r≤N)是指序列:al,al+1,…,ar-1,ar.若1≤l≤s≤t≤r≤n,则称a ...
- Django 同步数据库命令syncdb,makemigrations,migrate
syncdb只支持新增模型到数据库中 2条命令 你将使用2条命令进行迁移和操纵数据库schema: migrate,用来使迁移生效,以及未生效时报告它们的状态. makemigrations,用来根据 ...