jQuery Validate插件验证

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件.
导入 js 库

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>

语法格式

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<form id="myform">......</form>
<script>
//选中表单 调用validate()方法
$("#myform").validate({rules:{//校验规则},messages:{//自定义错误消息中文提示},submitHandler:function(){//只有全部验证都通过，才会执行这部分代码$.ajax({});//或者使用form.submit();}
});</script>

自定义语法规则

jQuery.validator.addMethod(//给规则起个名字name,//编写使用正则表达式验证的代码function(value, element){},//编写错误提示信息message
)

常用规则
序号规则描述
1 required:true 必须输入的字段。
2 remote:“check.php” 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输之入长度必须介于 5 和 10间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
案例

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>
<script type="text/javascript">$(function() {validate验证//自定义验证规则$.validator.addMethod("zhongwen",function(value) {var a=/^[\u2E80-\u9FFF]+$/;return a.test(value);},"请输入中文")//选中表单 调用validate()方法$("form").validate({rules:{yname:{zhongwen:true,required:true,rangelength:[3,5]},sex:{required:true,},birth:{required:true,dateISO:true,},hobby:{required:true,},},messages:{yname:{required:"<font style='color: red'>姓名不能为空</font>",rangelength:"<font style='color:red'>长度3~5位</font>",},sex:{required:"<font style='color:red'>性别不能为空</font>",},   birth:{required:"<font style='color:red'>生日不能为空</font>",dateISO:"<font style='color:red'>生日格式不正确</font>",},hobby:{required:"<font style='color:red'>爱好不能为空</font>",},},submitHandler:function(){$.post("staff?action=add", $("form").serialize(), function(i) {if(i>0){alert("添加成功");location="getall.jsp";}}, "text")}})})</script>
</head>
<body><form>姓名: <input type="text" name="yname"><br>性别:<input type="radio" value="男" name="sex">男<input type="radio" value="女" name="sex">女 <label for="sex" class="error"></label><br>生日:  <input type="text" name="birth"><br>爱好:<input type="checkbox" value="旅游" name="hobby" >旅游<input type="checkbox" value="读书" name="hobby" >读书<input type="checkbox" value="音乐" name="hobby" >音乐<input type="checkbox" value="运动" name="hobby" >运动<input type="checkbox" value="美食" name="hobby" >美食   <label for="hobby" class="error"></label><br>部门:<select name="bname"></select><br>    <input type="submit" value="增加"></form>
</body>
</html>

jQuery Validate插件验证相关推荐

jQuery Validate密码验证的基本使用
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
jQuery validate插件submitHandler提交导致死循环解决方法
作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1511.html dom对像的提交form.submit();和jquery对像的提交$('').submit() ...
JQuery validate 各项验证规则讲解
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 使用样例见:http://blog.csdn.net/jiangyu1013/article/det ...
封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /*****************************************************************jQ ...
jQuery Validate自定义验证
jQuery Validate 导入js库,这里是mvc中Scripts.Render的用法 @Scripts.Render("~/bundles/jquery")@Scripts ...
（转）jquery.validate插件的使用
JQuery Validate使用总结: 一.导入js库 <script src="../js/jquery.js" type="text/javascript&q ...
jquery validate 插件：(2)简单示例
最简单的例子,比如我们有一个表单: <form action="" method="get" id="frm"> < ...
利用jquery.validate异步验证用户名是否存在
经过上百次的试验试和搜索,终于把jquery.validate的各种功能用法了解清楚,网上关于jquery.validate的AJAX表单验证比较少,特别是对rules里面的remote提得比较简单, ...
jquery validate 联动验证
2019独角兽企业重金招聘Python工程师标准>>> 本来我们这个项目只有身份证.但是现在要增加一个港澳台湾的通行证来验证. 也就是在选择之前得选择一个身份类型. 现在要改成这样. ...
使用JQuery Validate插件的报Cannot read property 'settings' of undefined错误的解决方法
一.问题描述: 因为最近在做动态表单,很多字段需要动态添加验证,而我在动态添加删除校验规则时,浏览器经常报Cannot read property 'settings' of undefined,每次 ...

jQuery Validate插件验证

jQuery Validate插件验证相关推荐

最新文章

热门文章