`
wang_yanli
  • 浏览: 10801 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Web前端校验之jquery.validate(三)

 
阅读更多
作为jquery校验的补充,再进行整理
除了之前说的在ready中加入校验外,还可以在html中的class中直接加入校验,如下
补充一:
<form id="testForm" name="testForm">
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>
</form>

然后,在document的ready事件中,加入如下方法:
<script>
 $(document).ready(function(){
 $("#testForm").validate();
 }
</script>

这样,当form被提交的时候,就会根据input指定的class来进行验证了。如果失败,form的提交就会被阻止。并且,将提示信息显示在input的后面。
如果你还想在错误信息上显示特别的样式(比如字体为红色)即可通过添加:

<style type="text/css">
#testForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>


补充二:
可以通过event指定触发效验方式(可选值有keyup(每次按键时),blur(当控件失去焦点时),不指定时就只在按提交按钮时触发)
$(document).ready(function(){
$("#testForm").validate({
 event:"keyup" || "blur"
 })
})

补充三:
如果通过指定debug为true则表单不会提交只能用来验证(默认为提交),可用来调试
$(document).ready(function(){
$("#testForm").validate({
 debug:true
 })
})



参考:http://blog.csdn.net/kenkywu/article/details/7163968
分享到:
评论

相关推荐

    jquery.validate表单验证框架详解

    &lt;script type="text/javascript" src="js/jquery.validate.pack.js"&gt; ``` #### 二、基本使用 初始化jQuery.validate插件非常简单,只需在`document.ready()`事件中调用`validate()`方法即可,如: ```javascript ...

    jquery.validate的使用说明介绍

    jQuery Validate是一个用于表单验证的jQuery插件,广泛应用于Web开发中,以确保用户输入符合规定的要求。它支持多种验证类型和自定义验证规则,并能根据需要轻松修改默认的提示信息,以适应不同的业务逻辑和用户体验...

    jquery.validate.js

    而validate.js是jQuery的一个插件,它为表单验证提供了强大而灵活的支持,使得前端数据校验变得更加简单。本文将深入探讨validate.js的核心原理、使用方法以及常见应用场景。 一、validate.js概述 validate.js是...

    jquery.validate 与 struts2的整合使用

    在Web开发中,jQuery Validate和Struts2是两个非常重要的工具。jQuery Validate是一个轻量级的JavaScript库,用于对HTML表单进行验证,确保用户输入的数据符合预设的规则。而Struts2是一个基于MVC设计模式的Java Web...

    jquery-validate-zh-CN:适合web项目中的前端jquery的表单校验,使用非常简单,非常容易修改

    &lt;script src="path/to/jquery.validate.min.js"&gt; &lt;script src="path/to/localization/messages_zh.js"&gt; &lt;link rel="stylesheet" href="path/to/your.css"&gt; &lt;!-- ... --&gt; 提交 $(document).ready...

    jQuery的表单校验插件validate

    通常包括`jquery.js`、`jquery.validate.js`和可选的主题文件,如`jquery.validate.min.css`。 2. **基本配置**:在JavaScript代码中,通过`.validate()`方法初始化表单验证。例如: ```javascript $('#myForm')...

    web开发校验validate.js

    通过学习和实践这些示例,开发者不仅可以掌握`validate.js`的基本用法,还能了解到如何处理错误提示、如何自定义验证规则,以及如何与其他前端框架(如jQuery、Vue或React)集成。这将极大地提升开发效率,让web应用...

    java使用jquery_validate插件实现文本校验

    结合`jQuery Validate`和Java后端验证,可以构建出健壮且用户体验良好的Web应用。`extension.js`的使用表明开发者可能已经对验证功能进行了定制化,以适应项目具体需求,例如添加了与后端API交互的验证规则,提高了...

    C#前端验证和后台验证代码实例

    微软的前端验证是基于ASP.NET MVC框架,利用`jquery.validate.unobtrusive.js`插件和数据注解进行的。首先引入插件文件: ```html &lt;script src="../../Scripts/jquery.validate.unobtrusive.js"&gt; ``` 接着,在`web...

    jquery validate配合struts2简单整改

    &lt;script src="path/to/jquery.validate.min.js"&gt; ``` 接下来,配置jQuery Validate。在需要验证的表单中,我们可以设置规则(rules)和错误消息(messages)。规则定义了验证条件,如必填、邮箱格式等;错误消息则...

    轻量级校验框架 Jquery-Lweight-validate.zip

    &lt;script src="path/to/jquery-Lweight-validate.js"&gt; ``` 2. **配置规则**:在表单元素上通过data属性设置验证规则。例如,要求必填的输入框可以这样设置: ```html ``` 3. **初始化验证**:在文档加载完成后,调用...

    jquery validate校验

    1. 引入依赖:首先,需要引入jQuery库(如jquery-1.7.1.js)和jQuery Validate插件(如jquery.validate.js)。在HTML文件中添加如下代码: ```html &lt;script src="path/to/jquery-1.7.1.js"&gt; &lt;script src="path/to/...

    Jquery校验 (js+实例+帮助文档)

    在Web开发中,表单验证是必不可少的一环,jQuery提供了方便的校验插件,使得前端验证变得简单易行。 一、jQuery校验基础 jQuery的验证插件主要依赖于`jQuery.validate.js`文件,它提供了丰富的验证规则和错误提示...

    jquery校验框架

    &lt;script src="lib/jquery.validate.js"&gt; &lt;script src="oecpshowerror.js"&gt; ``` 在`oecpshowerror.js`中,定义验证规则和错误提示: ```javascript $(document).ready(function() { $('#myForm').validate({ ...

    jQuery的form表单校验插件

    在本压缩包中,文件名为 `jquery-validation-1.13.1`,通常包含两个文件:`jquery.validate.js`(主插件文件)和 `additional-methods.js`(包含了额外的验证方法)。 1. 引入文件: ```html &lt;script src="path/to/...

    jQuery表单验证插件

    &lt;script src="jquery.validate.min.js"&gt; $(document).ready(function() { $('#myForm').validate(); }); ``` #### 2. 验证规则 在表单元素上添加`data-rule-*`属性,可以定义验证规则,例如: ```html ``` ...

    jquery常用的校验.rar

    jQuery提供了丰富的API和插件,使得前端数据校验变得轻松快捷。本资料“jquery常用的校验.rar”正是针对这个主题,包含了一些关于jQuery校验的实践应用。 首先,jQuery的核心API中并没有内置的数据验证功能,但可以...

    jQuery表单验证插件应用

    jQuery表单验证插件是一种基于jQuery的强大前端校验工具,它可以帮助开发者快速实现网页表单的数据校验功能。这款插件支持多种校验规则,包括但不限于必填项、数字、邮箱格式等常见需求,并且还支持自定义校验规则及...

Global site tag (gtag.js) - Google Analytics