jQuery表单校验jquery.validate.js的使用

jQuery是一个快速、简洁的js库，为网站的快速开发简化了HTML文档遍历，事件处理，动画，以及Ajax交互。使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。

jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法

1.jquery包的引入：

引入jquery包：<script type="text/javascript" src="/common/js/jquery/jquery.js'"></script>

2.添加校验说明：

主要使用的是javascript编写的验证库——jQuery.Validate，这个验证库是属于jQuery的插件。

引入:

jQuery.Validate是监控form的，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需要在jQuery(document).ready（）时为form进行验证注册，格式： $(“#formid”).validate(jsonobj)。

其中formid是文件中form表单的id，jsonobj包含两个属性：rules和messages，rules用来指明每个字段上添加的校验规则，messages用来说明相应的校验出错时对应的提示语。

messages为非必须，如果自己不定义该属性，会采用默认的提示。

例如/test/validate/formvalidate.jsp:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>表单校验</title>
<script type="text/javascript" src="/common/jquery.js"></script>
<script type="text/javascript" src="/common/jquery.validate.pack.js"></script>
<script type="text/javascript" src="/common/jquery.form.js"></script>
</head>
<body><form id="test"><input name="nameput" type="text" size="20"/><input name="submit" type="submit" value="提交"/></form><script type="text/javascript">$("#test").validate({rules:{"nameput":{required:true,minlength:3,maxlength:10}  },messages:{"nameput":{required:"不能为空",minlength:jQuery.format("长度不小于{0}"),maxlength:jQuery.format("长度不大于{0}")}}})</script>
</body>
</html>

注意：nameput是input标签的name。

Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。

3.自定义验证方式

下面是自定义的验证方式：

$.validator.addMethod("stringlength", function(value, element,params) {
//默认值 : {trim:true,minLength:-1,maxLength:-1params = $.extend([true,-1,-1],params); //对于默认参数支持if(params[0]){  //过滤首尾空格value=$.trim(value);}value = value.replace(/<(?:.)*?>/g,""); //验证时过滤标签return this.optional(element) || ((params[1]<0 || value.length>=params[1])&&(params[2]<0 || value.length<=params[2]));
}, jQuery.format("长度在{1}-{2}之间"));

例如home工程中的登录校验：

$('#loginform').validate({//登陆校验rules:{"userAccount.userName":{"requiredstring":["true"]," requiredstring ":true,"stringlength":["true","3","40"]},"userAccount.userPwd":{"requiredstring":["true"],"stringlength":["true","1","20"]}},messages:{"userAccount.userName":{"requiredstring":"用户名必填","stringlength":jQuery.format("用户名长度在{1}和{2}之间")},"userAccount.userPwd":{"requiredstring":"密码不可以为空","stringlength":jQuery.format("密码长度在{1}和{2}之间")}}
})

userAccount.userName是页面对应的input的name，requiredstring、requiredstring、stringlength是自己定义的校验，定义在/image/hi/common/js/zxwvalidate.js里。

｛1｝、｛2｝等是rules里面对应验证方式的第几个元素，从0开始。

简单的实例：

$.validator.addMethod("twd", function(value, element,params) {    //默认值 : {trim:true,minLength:-1,maxLength:-1params = $.extend([true,-1,-1],params); //对于默认参数支持if(params[0]){value=$.trim(value);}})$("#test").validate({rules:{"nameput":{"twd":[true,3,10]}  },messages:{"nameput":{"twd":jQuery.format("长度在{1}和{2}之间")}}})

4.其他注意事项

（1）校验默认是在点击提交submit的时候起作用.

（2）如果缺少$().ready(function() { })，校验内容必须写在表单的后面。

（3）debug方法需要单独写或者rules和messages的后面，否则不会起作用。

附：

jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：

（1）在input对象中书写class样式指定验证规则或属性验证规则：

如<input type=”text” class=”required”/>

最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则。

（2）在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：

如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>

简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中。

（3）使用纯JS的方式：

如：

$().ready(function() { $("#aspnetform").validate({ rules: { name: "required", email: { required: true, email: true }})
})

很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。

默认的提示

messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
}

转载： http://www.linuxidc.com/Linux/2011-10/44424.htm

jQuery表单校验jquery.validate.js的使用相关推荐

轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
jQuery表单验证（Validate）使用方法
表单的校验是jQuery给页面开发者带来极大便利的功能之一,无论是在校大学生还是已经上班的工程师,都可以了解一下表单校验的基本功能. 目录 1.先来一张简单的表单 2.引入需要用到的jQuery 3. ...
JQuery 表单校验
表单校验的作用为什么要进行表单验证:保证数据符合要求为什么要进行JavaScript或者jQuery表单验证: 1.降低服务器端负担 2.还可以进行服务器验证(JSP) 正则表达式为什么使用正则 ...
JQuery 表单验证--jquery validation
jquery validation,表单验证控件官方地址 :http://jqueryvalidation.org/ jquery表单验证默认值校验规则 jquery表单验证默认的提示 1 &l ...
java jsp校验提示信息_java Jquery表单校验代码jsp页面
jsp.file 欢迎注册EasyMall /* 注册表单的js校验 */ var formObj = { /* 检查输入项是否为空 */ "checkNull" : functi ...
jQuery表单校验
小小Demo: <script>$(function () {//给username绑定失去焦点事件 $("#username").blur(function () { ...
js-最常用的js表单校验1
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...

jQuery表单校验jquery.validate.js的使用

jQuery表单校验jquery.validate.js的使用相关推荐

最新文章

热门文章