<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 1.8.1：前端表单验证的利器》 在Web开发中，表单验证是一项不可或缺的功能，它能确保用户输入的数据符合预设的规则，从而提高用户体验并减少服务器端的压力。jQuery Validate插件是JavaScript库...
核心文件`jquery.validate.min.js`包含了插件的主要逻辑，它能够自动检测表单元素，根据设定的验证规则进行判断，并显示相应的错误信息。 在国际化的背景下，支持多语言提示显得尤为重要。对于中文用户，jQuery ...
jQuery Validate插件是用于在客户端进行表单验证的强大工具，它提供了丰富的验证规则和自定义方法，使得用户在提交表单前可以即时检测输入数据的有效性，大大提升了用户体验。该插件是jQuery库的一个扩展，通过简单...
5. **错误消息的传递**：当jQuery Validate检测到错误时，可以将错误消息发送到服务器。在Action中捕获这些错误，然后在返回的Result中包含错误信息。例如，使用Struts2的JSON结果类型，将错误信息作为JSON对象返回...
而jQuery Validate插件是jQuery的一个强大附件，专为表单验证设计，使得网页表单的验证工作变得简单易行。本文将深入探讨jQuery validate.js的核心功能及其API，同时结合提供的帮助文档，为你揭示其背后的实现原理和...
在Web开发中，表单验证是不可或缺的一部分，而jQuery Validate插件作为一款强大的JavaScript验证工具，极大地简化了这一过程。本文将深入探讨jQuery Validate插件的基本概念、功能特性以及如何在项目中进行有效应用...
jQuery Validate是专门用于表单验证的插件，它可以实时检测用户输入的数据是否符合预设的规则，提高了数据的准确性和安全性。主要特性包括： 1. **自动错误标记**：在用户输入不合法时，立即在表单字段旁边显示错误...
jQuery Validate插件的核心功能在于它可以自动检测表单中的各个输入元素，如文本框、复选框、单选按钮等，并根据预设的规则进行验证。这些规则包括但不限于非空检查、电子邮件格式验证、电话号码格式验证等。通过...
- **表单验证**：jQuery Validate 提供了`.validate()`方法，用于初始化验证插件，如`$("#myForm").validate()`；通过设置规则`rules`和错误消息`messages`，可以实现自定义验证。 - **验证规则**：例如，`rules: {...
1. 自动验证：jQuery Validate插件可以自动检测表单提交时的输入有效性，无需额外的代码。 2. 实时反馈：在用户输入时，插件能立即显示错误提示，提升用户体验。 3. 多样化的验证规则：包括但不限于非空、电子邮件...
综上所述，jQuery 表单验证结合 `jQuery Validate` 插件，能够帮助开发者高效地实现表单数据的验证，提升用户体验，同时也提供了高度的可扩展性和自定义性。通过合理的配置和 CSS 样式设计，可以打造出既美观又实用...
此规则用于检测表单中的字段是否被填写。当`required`属性设置为`true`时，如果字段为空，则验证不通过。 ```javascript $("#form").validate({ rules: { field: { required: true } }, messages: { field: ...
在实际项目中，还可以考虑使用现有的验证库，如`jQuery Validate Plugin`，它提供了丰富的验证规则和自定义选项，可以简化上述过程。同时，记住要对用户的输入数据进行适当的清理和处理，以防止SQL注入等安全问题。 ...
jQuery Validate是一款基于jQuery的表单验证插件，它提供了方便、强大的表单验证功能，可以轻松实现对用户输入的数据进行有效性检查。通过添加自定义规则和消息，开发者可以定制各种验证逻辑，确保用户提交的数据...
本文将详细讲解如何利用Bootstrap和jQuery.validate来实现高效、友好的表单验证。 Bootstrap是一款流行的前端框架，它的表单设计简洁且响应式，适合各种设备。Bootstrap提供了两种基本的表单样式：基本表单和水平...
完整的jquery表单验证插件-jquery.validate.js,已历经无数人的检验和完善的优秀插件
在使用jQuery Validate插件进行表单验证时，可能会遇到一个问题：当表单中有多个name属性相同的元素时，插件只会对第一个元素进行验证，而忽略后续的相同name属性的元素。这个问题在动态生成表单或者有复选框、多选...
这样做的关键是，封装的函数需要返回validate方法返回的对象，该对象提供了一个form方法，用于检测表单是否通过了所有验证规则。 具体步骤如下： 1. 编写一个名为validform的函数，该函数封装了validate方法的调用...
1. **检测jQuery Validate是否存在**：首先检查当前环境中是否已经加载了jQuery Validate插件。 2. **自定义elements方法**：重写`$.validator.prototype.elements()`方法，使其能够遍历所有需要验证的元素，包括...