<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
/*自定义函数
$.validator.addMethod("checkCartLength",function(value,element,params){})
$.validator.addMethod固定写法
checkCartLength:自定义的函数名称
function(value,element,params):函数
value:要验证的文本框输入的值
element:文本框这个对象
params:传递的参数值
*/
//验证身价证的长度
$.validator.addMethod("checkCardLength",function(value,element,params){
var len = value.length;
if(len!=15&&len!=18) {
return false;
}
return true;
});
//验证15位身价证的
$.validator.addMethod("checkCardLength15",function(value,element,params){
var len = value.length;
if(len==15) {
var pattern = /^[\d]{15}$/;
var flag = pattern.test(value);
if(!flag) {
return false;
}
return true;
}
return true;
});
//验证18位身价证的
$.validator.addMethod("checkCardLength18",function(value,element,params){
var len = value.length;
if(len==18) {
var pattern = /^[\d]{18}|[\d]{17}[X]{1}$/;
var flag = pattern.test(value);
if(!flag) {
return false;
}
return true;
}
return true;
});
$(document).ready(function() {
$("#empForm").validate({
rules: {
realname: {
required:true
},
username: {
required:true,
rangelength:[5,8]
},
psw: {
required:true,
rangelength:[6,12]
},
psw2: {
required:true,
rangelength:[6,12],
equalTo:"#psw"
},
gender: {
required:true
},
age: {
required:true,
range:[26,50]
},
edu: {
required:true
},
birthday: {
required:true,
date:true
},
checkbox1: {
required:true
},
email: {
required:true,
email:true
},
card: {
required:true,
checkCardLength:1,
checkCardLength15:1,
checkCardLength18:1
}
},
messages: {
realname: {
required:"真实姓名不能为空"
},
username: {
required:"登录名不能为空",
rangelength:"登录名长度应该在5-8之间"
},
psw: {
required:"密码不能为空",
rangelength:"密码长度应该在6-12之间"
},
psw2: {
required:"确认密码不能为空",
rangelength:"确认密码长度应该在6-12之间",
equalTo:"两次输入的密码不一致"
},
gender: {
required:"您没有第三性别可选"
},
age: {
required:"年龄不能为空",
range:"年龄应该在26-50之间"
},
edu: {
required:"必须选择一个学历"
},
birthday: {
required:"出生日期不能为空",
date:"日期格式不对"
},
checkbox1: {
required:"至少选择一个爱好"
},
email: {
required:"电子邮件不能为空",
email:"必须输入正确的电子邮件"
},
card: {
required:"身价证不能为空",
checkCardLength:"身价证长度输入有误",
checkCardLength15:"您的15位身价证输入有误",
checkCardLength18:"您的18位身价证输入有误"
}
}
});
});
</script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw" name="psw" style="width:120px" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
<label style="display:none" for="gender" class="error">请选择性别</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">－－请选择你的学历－－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/>乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" />上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" />购物
<label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" style="width:120px" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="card" style="width:200px" name="card" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
完整的jquery表单验证插件-jquery.validate.js,已历经无数人的检验和完善的优秀插件
修复jquery.validate插件中name属性相同(如name='a[]‘)时验证的bug 使用jQuery.validate插件http://jqueryvalidation.org/，当节点的name相同时候，脚本特意忽略剩余节点，导致所有相关节点的errMsg都显示在第一个...
主要介绍了jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法,涉及jQuery表单元素获取及正则验证相关操作技巧,需要的朋友可以参考下
jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤选择器 使用jQuery属性过滤选择器 使用jQuery子元素过滤选择器...
9.5 综合案例分析—使用jQuery扩展工具函数实现对字符串指定类型的检测/305 9.5.1 需求分析/305 9.5.2 效果界面/305 9.5.3 功能实现/306 9.5.4 代码分析/309 9.6 本章小结/311 第10章 jQuery性能优化与最佳...
6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip...
6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3 表单插件form 7.4 cookie插件cookie 7.5 ...
jquery插件：一行代码搞定整站表单验证！ Validate all the forms through the site just need one line code! 通用表单验证方法 Validform version 2.0 For more information, please visit By sean during April...
Email检测,密码重复检测,可以用于表单发送的各种环境，例如发送反馈，注册帐号 复制代码 代码如下:”container”> <?if( isset($_POST[‘send’]) && (!validateName($_POST[‘name’]) || !validateEmail($_...