jquery表单验证插件validation使用方法详解

一、如何使用

引入js文件

<script src="jquery.js"></script>
<script src="jquery.validate-1.13.1.js"></script>

编写html页面，这里仅以用户名、密码为例

<body>
 <form id="demoForm">
  <fieldset>
   <legend>用户登录</legend>
   <p>
    <label for="username">用户名</label>
    <input type="text" id="username" name="username">
   </p>
   <p>
    <label for="password">密码</label>
    <input type="text" id="password" name="password">
   </p>
  </fieldset>
 </form>
</body>

编写script脚

$(document).ready(function(){
 $("#demoForm").validate({
  rules:{
   username:{
    required:true,// 是否必填
    minlength:2, // 最小长度
    maxlength:10 // 最大长度
   },
   password:{
    required:true,
    minlength:2,
    maxlength:16
   }
  }
 });
});

二、测试

如果大家还想深入学习，可以点击两个精彩的专题：jquery表单验证大全 JavaScript表单验证大全

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Jquery Validation插件防止重复提交表单的解决方法

    由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮.CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码.代码如下: js: 代码 复制代码 代码如下: function disableBtn(btnID, newText) { Page_IsValid = null; if (typeo

  • jQuery Validation实例代码 让验证变得如此容易

    jQuery Validation实例代码 让验证变得如此容易

    使用客户端验证可以有效的减少数据往返服务器和客户端的次数,有利于提高服务器的资源利用路,并且还能够给用户直观,快速的回应. 在Web 2.0时代,这显得尤其重要,我想大家一定和我一样讨厌用基础的javascript写着烦人的验证.现在服务器端的验证有比较好的框架可以解决,ASP.NET MVC就可以很好的完成这样的工作,所以对于.net开发来说,拥有一个好的客户端养正框架对于开发效率的提高起着至关重要的作用. 我们可以通过下面的地址获得这个JS框架 JQuery jQuery Validatio

  • jquery插件validation实现验证身份证号等

    先推荐一个基于bootstrap的jQuery validation插件:http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/ jQuery validation添加验证规则 validata.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

  • Jquery validation remote 验证的缓存问题解决方法

    Jquery validation remote 验证的缓存问题解决方法

    最近项目中一直在用 Jquery validation 做校验,结合bootstrap 和 jquery form 感觉效果不错.但是remote验证的缓存问题让我头痛了很久,几乎就像放弃这款插件了. 举例说明: 现有学校,年级,班级实体 在同一学校下不能有相同的年级,在同一年级下不能有相同的班级 以同一学校下不能有相同年级为例,在验证的时候用remote方式: JS 复制代码 代码如下: "gradeId" : { required : true, min : 0, remote:

  • jQuery验证插件validation使用指南

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性. 1.jquery.validate插件功能 简单

  • jquery validation验证身份证号,护照,电话号码,email(实例代码)

    validata.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

  • jQuery Validation插件remote验证方式的Bug解决

    不过奇怪的是,最近用下来感觉有些古怪,因为好像有些死板,已有功能的应变能力还不强,甚至还有个奇怪的Bug.任何项目有Bug其实也正常,但这个Bug其实是一个文档上已经记载了,却没有实现的功能,这就有些说不过去了.这个问题便出在remote验证方式上,还好修改起来非常容易,在此记录一下,也方便以后的参考. 在表单验证时,有时候会需要发一个AJAX请求去服务器上进行判断,例如在用户注册时检查用户名是否存在.jQuery Validation插件提供了一种remote方式来实现这一点.例如我可以这样验

  • 修改jQuery Validation里默认的验证方法

    在最近做的一个项目中,使用jQuery Validation验证日期,遇到的问题和一个没有预料到的情况是,在ASP.NET MVC 3的项目中,对于 <input type="date" data-val="true" />的元素,如果调用form的valid方法验证form,虽然我没有添加日期验证的设置,仅仅type="date",但其依然调用了日期验证逻辑来验证日期格式是否正确.这本来是个不错的行为,但问题在于,其支持的日期格式有

  • jQuery 表单验证插件formValidation实现个性化错误提示

    jQuery 表单验证插件formValidation实现个性化错误提示

    其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

  • jQuery.Validate 使用笔记(jQuery Validation范例 )

    验证操作类formValidatorClass.js 复制代码 代码如下: /** * @author ming */ $(document).ready(function(){ /**//* 设置默认属性 */ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符验证 jQuery.validator.addMethod("stringCheck", function(

随机推荐