`

jquery validate 验证

 
阅读更多

步骤:
1, 要导入相应的jQuery.js与jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript">
2, 在相应的字段上指定验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必须要输入数据
3, 指定要对表单进行验证
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>

效果如下图:
1. 基础知识
1.1. 指定验证规则的方式
1.1.1. 把验证规则写到字段元素的class属性中
例:
名称 * <input type="text" name="loginName" class="required"><br>
密 *  <input type="password" name="password" class="required"><br>
再次输入 <input type="password" name="password2"
class="{equalTo: '[name=password]'} required"><br>
生日   <input type="text" name="birthday" class="dateISO"><br>
E-mail *<input type="text" name="email" class="email"><br>
PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">

说明:
1,如果使用class="{}"的方式,必须引入包:jquery.metadata.js
1.1.2. 调用validate()方法时传递字段的验证规则
$(function() {
$("#testForm").validate({
rules: {
loginName:{
required: true,
min: 2
} ,
password: {
required: true
},
password2: {
equalTo: "input[name=password]"
}
}
});
});
1.2. 内置的验证规则
required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: "gif|png|jpg" 输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10
说明:
1, remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。
2, 某些属性值中的引号不能省略,否则出错。如accept、equalTo等。
1.3. 自定义验证规则
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:
jQuery.validator.addMethod("name",function,message)
其中:
1, name为验证规则的名称
2, function定义验证的规则。参数有?。返回值为?。
3, message是验证失败时的提示信息。
1.4. 指定错误提示内容
1.4.1. 更改默认的提示内容
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")

分享到:
评论

相关推荐

    jquery validate 验证自定义样式

    在本文中,我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先,我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式,但这些样式可能不能满足所有设计...

    jquery validate 验证手册

    《jQuery Validate验证手册》是针对JavaScript库jQuery的一个插件,主要功能是提供强大的表单验证功能,帮助开发者创建用户友好的、功能丰富的交互式表单。这个插件基于jQuery库,利用JavaScript的强大功能,简化了...

    jquery validate验证示例

    在这个“jquery validate验证示例”压缩包中,很可能包含了 `jQuery Validate` 插件的核心文件以及一些示例代码,帮助开发者快速理解和使用这个插件。 首先,`jQuery Validate` 的核心功能包括: 1. **基本验证**...

    解决jquery validate remote 为什么只验证一次

    解决jquery validate remote 只验证一次的问题

    JQueryValidate验证说明

    `jQuery Validate`是一个基于JavaScript库`jQuery`的验证插件,用于高效地验证用户在表单中输入的数据。它提供了一系列预定义的验证规则,同时允许开发者自定义验证方法以满足特定需求。该框架对于创建具有国际化...

    CKEditor无法验证的解决方案(js验证+jQuery Validate验证)_.docx

    ### CKEditor无法验证的解决方案(js验证+jQuery Validate验证) #### 问题背景 在实际项目开发过程中,我们经常需要使用富文本编辑器来增强用户体验。CKEditor是一款非常强大的富文本编辑器,它提供了丰富的功能...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    2. **初始化验证**:使用`jQuery`选择器找到需要验证的表单元素,并调用`.validate()`方法,配置相应的验证规则。例如,对于密码字段,可能有`required`(必填)、`minlength`(最小长度)和自定义的正则表达式规则...

    Jquery validate验证框架案例

    非常好的Jquery validate:每个案例独立,都有注释 讲解了: 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果

    jqueryvalidate验证demo 美化了表单元素

    刚刚研究了jqueryvalidate表单验证插件, 加了一些样式,出错提示和验证通过的提示,通过ajaxSubmit()异步提交表单 对input select 标签进行了简单美化。样式全是自己写的,不是网上照抄 适合初学jqueryvalidate, ...

    jquery+validate.js+验证规则文件

    只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:"#field" 输入值必须和 #field 相同。 11 accept...

    jquery validate验证详细解答

    jQuery Validate插件是基于jQuery的一个非常实用的表单验证库,它可以极大地简化前端表单验证的工作流程,使得开发者能够快速实现各种复杂的验证逻辑。此插件提供了丰富的内置验证方法,并且支持自定义规则,非常...

    jQuery validate 验证

    jQuery validate验证,新赠员工时判断输入的用户名是存在(可更改成注册用户时,判断该邮箱是否使用,更改个人信息时,用户名是否存在,原密码是否正确) 两次密码的验证,邮箱、身份证号的验证 ,功能很强大,值得...

    jquery validate 表单验证

    接下来,我们将深入探讨jQuery Validate的使用方法、核心概念以及如何结合其他脚本文件实现自定义验证。 首先,`jquery.js`是jQuery的核心库,它是jQuery Validate的基础,没有它,我们无法使用jQuery Validate。...

    jquery-validate验证框架使用详解及JS文件

    《jQuery Validate验证框架详解与JS应用》 在Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的验证插件,它简化了...

    jquery表单验证实例,对数字,字数,必填项等校验

    `jQuery Validate`是基于`jQuery`的一个插件,专门用于实现客户端的表单验证,它可以高效且易于地实现对数字、字数、必填项等各种类型的验证。 在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,...

    解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

    在使用jQuery Validate插件进行表单验证时,可能会遇到一个问题:当某个字段首次验证通过,然后在后续的验证中未通过时,之前验证成功的标记(例如√)仍然显示在对应的`&lt;label&gt;`元素上,而没有正确地更新为错误状态...

    jQuery validate框架的个性化验证

    jQuery Validate 是一个强大的客户端验证插件,用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程,提供了丰富的内置验证规则和可扩展的自定义验证功能,使得表单验证更加人性化和高效。 1....

    jQuery.validate验证

    总的来说,jQuery.validate是JavaScript开发中不可或缺的工具,它简化了表单验证的过程,提高了代码的可读性和维护性。通过深入理解和灵活运用,开发者可以创建出高效且用户友好的表单验证机制。

    jquery validate 信息气泡提示

    在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...

    CKEditor无法验证的解决方案(js验证+jQuery Validate验证)

    因此,普通的JavaScript验证或是jQuery Validate验证在表单提交时获取不到CKEditor的内容。通常情况下,CKEditor会在提交事件之前将编辑器中的内容同步到textarea元素中,但是这种行为可能因为某些原因导致验证失败...

Global site tag (gtag.js) - Google Analytics