jQuery formValidator使用说明

合集下载

jQuery表单校验插件validator使用方法详解

本文已被整理到了，欢迎大家学习阅读。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
<tr> <td>性别</td> <td> <input type="radio" id="male" value="m" name="sex" />男 <input type="radio" id="female" value="f" name="sex" />女 <label class="error" for="sex"></label>
validator表单校验的简单示例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css"> table { width: 30%;
<tr> <td></td> <td><input type="submit" id="smtBtn" value="确定"></td> </tr> </table> </form>

Jquery验证插件JqueryValidation动态验证用户名等

Jquery验证插件JqueryValidation动态验证⽤户名等//form1 验证⽤户名$("#form1").validate({focusCleanup: false,focusInvalid: false,errorElement: "span",errorClass: "sss",errorPlacement: function (error, element) {error.appendTo(element.next());},rules: {TextUserName: {required: true,isCharlength6_12: true,jszxolUserName: true,remote: {url: "../mobileApi.asmx/isExistsUserName",type: "post",dataType: "json",async: false,//如果这⾥⽂本框填写完后直接快速点击按钮验证是否⽤户存在的话，此处最好写同步进⾏.data: { user_name: function () { return $("#TextUserName").val(); } }}}}, //rulesmessages: {TextUserName: {required: "请输⼊⽤户名",isCharlength6_12: "⽤户名为6-12位字符",jszxolUserName: "以字母开头，长度在6-12之间",remote: "⽤户名已存在"}}//messages});//form2 验证⼿机号$("#form2").validate({focusCleanup: false,focusInvalid: false,errorElement: "span",errorClass: "sss",errorPlacement: function (error, element) {error.appendTo(element.next());},rules: {TextUserPhone: {required: true,isMobile: true,remote: {url: "../mobileApi.asmx/isExistsPhone",type: "post",dataType: "json",data: { mobile_number: function () { return $("#TextUserPhone").val(); } }}}}, //rulesmessages: {TextUserPhone: {required: "请输⼊⼿机号码",isMobile: "⼿机号码不符合规范", remote: "⼿机号码已存在"}}//messages});。

jquery validate动态添加和删除校验规则

jquery validate动态添加和删除校验规则随着jQuery的使用越来越广泛，jquery validate在前端表单校验中也变得越来越重要。

在使用jquery validate时，我们需要为表单的每个元素添加校验规则。

但有时候我们需要动态地添加或删除校验规则。

本文将围绕“jquery validate动态添加和删除校验规则”进行讲解。

1.获取validate对象在开始动态添加或删除校验规则前，我们需要先获取到该表单的validate对象。

可以通过以下代码获取：```javascriptvar validate = $("#form").validate();```其中，#form为表单的id。

2.动态添加校验规则当我们需要动态添加校验规则时，可以使用addMethod方法。

该方法用于添加自定义校验规则。

以下是方法的基本用法：```javascript$.validator.addMethod(name, method, message)```方法的参数说明如下：- name: 校验方法的名称，用于标识该校验方法；- method: 校验方法的处理函数，函数参数为当前元素的value值，函数返回true表示校验通过，false表示校验不通过；- message: 校验不通过时的错误提示信息。

具体可以参考下方代码：```javascript//新建一个校验规则$.validator.addMethod('chinese', function(value, element) {var chineseReg = /^[\u4e00-\u9fa5]+$/;return this.optional(element) || (chineseReg.test(value)); }, '只能输入中文字符！');//动态添加校验规则validate.rules['name'] = {required: true,chinese: true,minlength: 2,maxlength: 20};```以上代码中，我们定义了一个名为“chinese”的校验规则，用于判断输入的值是否为中文字符。

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是什么?jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。

你可以划分多个校验组，每个组的校验都是互不影响。

对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。

目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库）、functionValidator （可使用外部函数来做校验）本插件于其他校验控件最大的区别有3点：1、校验功能可以扩展。

对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制，别的表单校验控件是代码里写死的，而formValidator是通过外部js文件来扩展的，你可以通过写正则表达式和函数来无限的扩展这些功能。

2、实现了校验代码于html代码的完全分离。

你的所有信息都无需配置在校验表单元素上，你只要在js上配置你的信息。

使美工（界面）和javascript工程师的工作不交织在一起3、你只需写一行代码就能完成一个表单元素的所有校验。

你只需要写一行代码就能完成一下所有的控制∙支持所有类型客户端控件的校验∙支持jQuery所有的选择器语法，只要控件有唯一ID和type属性∙支持函数和正则表达式的扩展。

提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。

∙支持2种校验模式。

第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)∙支持多个校验组。

Jq_Validate 使用说明

一、导入js库<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.validate.js" type="text/javascript"></script><script src="js/jquery.metadata.js" type="text/javascript"></script><script src="js/messages_cn.js" type="text/javascript"></script><script src="js/common_validate.js" type="text/javascript"></script>二、默认校验规则规则描述序号1required:true必须输入的字段。

2remote:"check.php"使用ajax方法调用check.php验证输入值。

3email:true必须输入正确格式的电子邮件。

4url:true必须输入正确格式的网址。

5date:true必须输入正确格式的日期。

日期校验ie6出错，慎用。

6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。

只验证格式，不验证有效性。

7number:true必须输入合法的数字（负数，小数）。

8digits:true必须输入整数。

9creditcard:必须输入合法的信用卡号。

10equalTo:"#field"输入值必须和#field相同。

Validform使用入门

Validform使用入门Validform是一种简单易用的前端表单验证插件，它能够帮助开发人员快速实现表单验证功能。

它基于jQuery库，并提供一系列简单的API，使表单验证变得更加简单高效。

本文将介绍Validform的使用入门，包括安装、基本配置和常用验证方法。

一、安装使用Validform之前，首先要引入jQuery库。

可以在HTML页面中插入以下代码：`````````<script src="validform.min.js"></script>```接下来，我们可以开始配置和使用Validform来进行表单验证。

二、基本配置1.标记验证规则在需要进行验证的表单元素上，使用HTML标记来指定验证规则。

例如，使用`datatype`属性指定验证类型，使用`nullmsg`属性指定为空时的提示信息。

```html<input type="text" name="username" datatype="*6-18"nullmsg="请输入用户名"><input type="password" name="password" datatype="*6-18" nullmsg="请输入密码">```2.初始化表单验证在HTML页面的脚本部分，使用以下代码来初始化表单验证：```javascript$(function$("form").Validform(;});```在这个例子中，我们通过`$("form")`选择器选择了页面上的所有表单，并对其进行了初始化。

3.表单提交验证使用Validform插件进行表单验证后，可以阻止提交按钮的默认行为，并手动进行验证。

jQuery.Validate使用笔记（jQueryValidation范例）

jQuery.Validate使⽤笔记（jQueryValidation范例）验证操作类formValidatorClass.js复制代码代码如下:/*** @author ming*/$(document).ready(function(){/**//* 设置默认属性 */$.validator.setDefaults({submitHandler: function(form) {form.submit();}});// 字符验证jQuery.validator.addMethod("stringCheck", function(value, element) {return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);}, "只能包括中⽂字、英⽂字母、数字和下划线");// 中⽂字两个字节jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {var length = value.length;for(var i = 0; i < value.length; i++){if(value.charCodeAt(i) > 127){length++;}}return this.optional(element) || ( length >= param[0] && length <= param[1] );}, "请确保输⼊的值在3-15个字节之间(⼀个中⽂字算2个字节)");// ⾝份证号码验证jQuery.validator.addMethod("isIdCardNo", function(value, element) {return this.optional(element) || isIdCardNo(value);}, "请正确输⼊您的⾝份证号码");// ⼿机号码验证jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value));}, "请正确填写您的⼿机号码");// 电话号码验证jQuery.validator.addMethod("isTel", function(value, element) {var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式************return this.optional(element) || (tel.test(value));}, "请正确填写您的电话号码");// 联系电话(⼿机/电话皆可)验证jQuery.validator.addMethod("isPhone", function(value,element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;var tel = /^\d{3,4}-?\d{7,9}$/;return this.optional(element) || (tel.test(value) || mobile.test(value));}, "请正确填写您的联系电话");// 邮政编码验证jQuery.validator.addMethod("isZipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");//开始验证$('#submitForm').validate({/**//* 设置验证规则 */rules: {username: {required:true,stringCheck:true,byteRangeLength:[3,15]},email:{required:true,email:true},phone:{required:true,isPhone:true},address:{required:true,stringCheck:true,byteRangeLength:[3,100]}},/**//* 设置错误信息 */messages: {username: {required: "请填写⽤户名",stringCheck: "⽤户名只能包括中⽂字、英⽂字母、数字和下划线",byteRangeLength: "⽤户名必须在3-15个字符之间(⼀个中⽂字算2个字符)"},email:{required: "请输⼊⼀个Email地址",email: "请输⼊⼀个有效的Email地址"},phone:{required: "请输⼊您的联系电话",isPhone: "请输⼊⼀个有效的联系电话"},address:{required: "请输⼊您的联系地址",stringCheck: "请正确输⼊您的联系地址",byteRangeLength: "请详实您的联系地址以便于我们联系您"}},/**//* 设置验证触发事件 */focusInvalid: false,onkeyup: false,/**//* 设置错误信息提⽰DOM */errorPlacement: function(error, element) {error.appendTo( element.parent());},});});测试页index.html复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>jQuery验证</title><script src="lib/jquery/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script> <script type="text/javascript" src="lib/jquery/messages_cn.js"></script><script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script><style type="text/css">* {}{font-family: Verdana;font-size: 96%;}label {}{width: 10em;float: left;}label.error {}{float: none;color: red;padding-left: .5em;vertical-align: top;}p {}{clear: both;}.submit {}{margin-left: 12em;}em {}{font-weight: bold;padding-right: 1em;vertical-align: top;}</style></head><body><form class="submitForm" id="submitForm" method="get" action=""><fieldset><legend>表单验证</legend><p><label for="username">⽤户名</label><em>*</em><input id="userName" name="username" size="25" /></p><p><label for="email">E-Mail</label><em>*</em><input id="email" name="email" size="25" /></p><p><label for="phone">联系电话</label><em>*</em><input id="phone" name="phone" size="25" value="" /></p><p><label for="address">地址</label><em>*</em><input id="address" name="address" size="22"></p><input class="submit" type="submit" value="提交"/></p></fieldset></form></body></html>校验规则参数格式为; name:{rule1, rule2 ....} name 要使⽤input 标签的name，之前，错误理解为 ID 了；提⽰信息使⽤ alert 输出:复制代码代码如下:errorPlacement: function (error, element) {if (error[0].textContent){Alert(error[0].textContext); }else {Alert(error[0].innerText); }}。

jquery.validate校验文件使用说明

jquery.validate校验⽂件使⽤说明⼀导⼊js库<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script>⼆、默认校验规则(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验证代码：$().ready(function() {$("#newform").validate({rules: {classid: "required",title: {required:true,minlength:5,remote: {url: ajurl,//必须确保post到服务器端能正常输出true falsetype: "post",dataType: "json", //接受数据格式data: { //要传递的数据title: function() {return $("#title").val();}}}},isKeys: "required",},messages: {classid: "请选择分类",title: {required: "请输⼊新闻标题",minlength: "标题输⼊太短了",remote: "此标题已经存在，请修改",},isKeys: "请输⼊新闻关键字",}});});服务器端必须返回：true 或 false (必须⼩写)可以将以上代码加⼊独⽴js⽂件中调⽤错误提⽰样式：input.error { border: 1px dotted red; }label.error {background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}label.checked {background:url("./demo/images/checked.gif") no-repeat 0px 0px; border:1px solid #FFCC33;}默认错误时此插件将⾃动给当前html控件加⼊error样式，并跟<label class='error'>错误提⽰</label>，以上样式可控制错误显⽰效果。

jquery.validate+jquery.form提交的三种方式

jquery.validate+jquery.form提交的三种⽅式概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交⽅案。

⽅式⼀：是通过jquery.validate的submitHandler选项，即当表单通过验证时执⾏回调函数。

在这个回调函数中通过jquery.form来提交表单；⽅式⼆：是通过jquery.form的beforeSubmit，即在提交表单前执⾏的回调函数，这个函数如果返回true，则提交表单，如果返回false，则终⽌提交表单。

根据jquery.validate插件的valid()⽅法，就可以通过jquery.form提交表单时来对表单进⾏验证。

⽅式三：是通过jquery.validate验证表单的validate⽅法。

这个⽅法的好处是对表单验证的控制更加⾃由实例：下⾯通过三个实例分别阐述上⾯的三种⽅式载⼊CSS样式⽂件<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>CSS样式⽂件内容input{height:25px;line-height:25px;padding-left:4px;}span.checked{padding: 0px 5px 0px 25px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;height: 25px;line-height:25px;font-size: 12px;white-space: nowrap;text-align: left;color: #E6594E;background: url("images/acion2.png") no-repeat 3px; /* #FCEAE8 */}span.unchecked{padding: 0px 5px 0px 25px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;height: 23px;line-height:23px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;text-align: left;color: #E6594E;background: #FCEAE8 url("images/acion.png") no-repeat 3px;}载⼊javascript⽂件<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script><script language="JavaScript" type="text/JavaScript" src="js/jquery.form.js"></script><script language="JavaScript" type="text/JavaScript" src="js/jquery.validate.js"></script><script language="JavaScript" type="text/JavaScript" src="js/localization/messages_tw.js"></script>HTML内容<body><span id="result"></span><form id='commentForm'><fieldset><legend>jquery.validate+jquery.form提交的三种⽅式</legend><p><label for='cusername'>姓名</label><em>*</em><input id='cusername' name='username' size='25' /></p><p><label for='cemail'>电⼦邮件</label><em>*</em><input id='cemail' name='email' size='25' /></p><p><input class='submit' type='submit' value='提交'></p></fieldset></form></body>jquery.validate+jquery.form提交⽅式1的javascript内容<script language="javascript">function showResponse(responseText,statusText) {if(statusText=='success'){$("#result").html(responseText);}}$(document).ready(function(){$('#commentForm').validate({focusCleanup:true,focusInvalid:false,errorClass: "unchecked",validClass: "checked",errorElement: "span",submitHandler:function(form){$(form).ajaxSubmit({type:"post",url:"test_save.php?time="+ (new Date()).getTime(),//beforeSubmit: showRequest,success: showResponse});},errorPlacement:function(error,element){var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");if(s!=null){s.remove();}error.appendTo(element.parent());},success: function(label) {//label.addClass("valid").text("Ok!")label.removeClass("unchecked").addClass("checked");},rules:{username:{required:true,minlength:3},email:{required:true}}});});</script>jquery.validate+jquery.form提交⽅式2的javascript内容<script language="javascript">function showResponse(responseText,statusText) {if(statusText=='success'){$("#result").html(responseText);}}function showRequest(formData,jqForm,options){return $("#commentForm").valid();}$(document).ready(function(){$('#commentForm').submit(function(){$(this).ajaxSubmit({type:"post",url:"test_save.php?time="+ (new Date()).getTime(),beforeSubmit:showRequest,success:showResponse});return false; //此处必须返回false，阻⽌常规的form提交});$('#commentForm').validate({focusCleanup:true,focusInvalid:false,errorClass: "unchecked",validClass: "checked",errorElement: "span",errorPlacement:function(error,element){var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");if(s!=null){s.remove();}error.appendTo(element.parent());},success: function(label) {//label.addClass("valid").text("Ok!")label.removeClass("unchecked").addClass("checked");},rules:{username:{required:true,minlength:3},email:{required:true}}});});</script>jquery.validate+jquery.form提交⽅式3的javascript内容<script language="javascript">var options={focusCleanup:true,focusInvalid:false,errorClass: "unchecked",validClass: "checked",errorElement: "span",errorPlacement:function(error,element){var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");if(s!=null){s.remove();}error.appendTo(element.parent());},success: function(label) {//label.addClass("valid").text("Ok!")label.removeClass("unchecked").addClass("checked");},rules:{username:{required:true,minlength:3},email:{required:true}}};function showResponse(responseText,statusText) {if(statusText=='success'){$("#result").html(responseText);}}function showRequest(formData,jqForm,options){return $("#commentForm").valid();}$(document).ready(function(){validator=$('#commentForm').validate(options);$("#reset").click(function(){validator.resetForm();});$("button").click(function(){validator.form();});$('#commentForm').submit(function(){$(this).ajaxSubmit({type:"post",url:"test_save.php?time="+ (new Date()).getTime(),beforeSubmit:showRequest,success:showResponse});return false; //此处必须返回false，阻⽌常规的form提交});});</script>DEMO源码：⼀些问题1、其实这个问题在昨天晚上写这篇⽂章的时候就有发现，即我在HTML⽂件头使⽤<!DOCTYPE html>时，输⼊框及错误信息的样式似乎有些问题。

jquery中validator的用法

jquery中validator的用法1.引言1.1 概述概述部分的内容可以包括以下内容：jQuery中的Validator是一个强大的表单验证插件，它可以帮助开发者对用户输入的表单数据进行有效的验证和过滤。

通过使用Validator，开发者可以轻松地验证用户输入的数据是否符合预期的格式和规则，从而提高应用程序的可靠性和安全性。

Validator的核心理念是基于规则和验证器，开发者可以定义各种验证规则，并将其应用到表单字段上。

当用户提交表单时，Validator会自动触发验证规则，并根据规则中定义的条件和要求对用户输入的数据进行验证。

如果输入数据符合规则要求，Validator将返回验证通过的结果，否则将返回相应的错误信息。

除了基本的验证功能，Validator还提供了丰富的扩展功能，如自定义错误消息、条件验证、异步验证等。

开发者可以根据实际需求进行配置和定制，使其更适应各种复杂的业务场景。

在使用Validator时，开发者只需简单地引入相应的脚本文件，并通过一些简单的代码片段即可实现表单的验证功能。

Validator提供了一系列方便的API和方法，可以帮助开发者更加灵活地控制和管理验证过程。

总之，通过使用jQuery中的Validator，开发者可以轻松地实现表单验证，并有效地提高应用程序的可靠性和用户体验。

在接下来的文章中，我们将详细介绍Validator的常用方法和用法，以及其优势和局限性。

文章结构部分应该介绍本文的整体结构和各个部分的内容概要。

可以按照以下方式编写1.2 文章结构的内容：1.2 文章结构本文分为引言、正文和结论三个部分。

引言部分主要介绍了本文的概述、文章结构和目的。

在概述中，简要介绍了将要讨论的主题——jquery中Validator的用法。

接下来，讲解了本文的文章结构，包括引言、正文和结论三个部分。

最后，明确了本文的目的，即介绍jquery中Validator的基本概念、常用方法和用法，以及讨论其优势和局限性。

formValidate输入验证

formValidate输⼊验证<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>jQuery formValidator表单验证插件 -- by:猫冬，email:wzmaodong@</title><meta name="Author" content="猫冬"><meta name="description" content="jQuery formValidator表单验证插件" /><meta name="keywords" content="jQuery,formValidator,插件,表单,验证,插件,javascript,表单验证,提⽰层" /><script src="jquery_last.js" type="text/javascript"></script><link type="text/css" rel="stylesheet" href="style/validator.css"></link><script src="formValidator.js" type="text/javascript" charset="UTF-8"></script><script src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script><script type="text/javascript">$(document).ready(function(){$.formValidator.initConfig({formid:"form1",onerror:function(){alert("校验没有通过，具体错误请看错误提⽰")}});$("#sfz").formValidator({onshow:"请输⼊15或18位的⾝份证",onfocus:"输⼊15或18位的⾝份证",oncorrect:"输⼊正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"你输⼊的⾝份证格式不正确"});;$("#sfz1").formValidator({onshow:"请输⼊15或18位的⾝份证",onfocus:"输⼊15或18位的⾝份证",oncorrect:"输⼊正确"}).functionValidator({fun:isCardID});$("#zs").formValidator({onshow:"请输⼊整数",oncorrect:"谢谢你的合作，你的整数正确"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});$("#zzs").formValidator({onshow:"请输⼊正整数",oncorrect:"谢谢你的合作，你的正整数正确"}).regexValidator({regexp:"intege1",datatype:"enum",onerror:"正整数格式不正确"});$("#fzs").formValidator({onshow:"请输⼊负整数",oncorrect:"谢谢你的合作，你的负整数正确"}).regexValidator({regexp:"intege2",datatype:"enum",onerror:"负整数格式不正确"});$("#sz").formValidator({onshow:"请输⼊数字",oncorrect:"谢谢你的合作，你的数字正确"}).regexValidator({regexp:"num",datatype:"enum",onerror:"数字格式不正确"});$("#zs1").formValidator({onshow:"请输⼊正数",oncorrect:"谢谢你的合作，你的正数正确"}).regexValidator({regexp:"num1",datatype:"enum",onerror:"正数格式不正确"});$("#fs").formValidator({onshow:"请输⼊负数",oncorrect:"谢谢你的合作，你的负数正确"}).regexValidator({regexp:"num2",datatype:"enum",onerror:"负数格式不正确"});$("#sj").formValidator({onshow:"请输⼊你的⼿机号码",onfocus:"必须是13或15打头哦",oncorrect:"谢谢你的合作，你的⼿机号码正确"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"⼿机号码格式不正确"});//$("#").formValidator({onshow:"",onfocus:"请输⼊",oncorrect:"谢谢你的合作，你的正确"}).regexValidator({regexp:"",datatype:"enum",onerror:"格式不正确"});$("#email").formValidator({onshow:"请输⼊你的email",onfocus:"请注意你输⼊的email格式，例如:wzmaodong@",oncorrect:"谢谢你的合作，你的email正确"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email格式不正确"});$("#fds").formValidator({onshow:"请输⼊浮点数",oncorrect:"谢谢你的合作，你的浮点数正确"}).regexValidator({regexp:"decmal",datatype:"enum",onerror:"浮点数格式不正确"});$("#zfds").formValidator({onshow:"请输⼊正浮点数",oncorrect:"谢谢你的合作，你的正浮点数正确"}).regexValidator({regexp:"decmal1",datatype:"enum",onerror:"正浮点数格式不正确"});$("#ffds").formValidator({onshow:"请输⼊负浮点数",oncorrect:"谢谢你的合作，你的负浮点数正确"}).regexValidator({regexp:"decmal2",datatype:"enum",onerror:"负浮点数格式不正确"});$("#fffds").formValidator({onshow:"请输⼊⾮负浮点数",oncorrect:"谢谢你的合作，你的⾮负浮点数正确"}).regexValidator({regexp:"decmal4",datatype:"enum",onerror:"⾮负浮点数格式不正确"});$("#fzfds").formValidator({onshow:"请输⼊⾮正浮点数",oncorrect:"谢谢你的合作，你的⾮正浮点数正确"}).regexValidator({regexp:"decmal5",datatype:"enum",onerror:"⾮正浮点数格式不正确"});$("#ys").formValidator({onshow:"请输⼊16进制颜⾊",oncorrect:"谢谢你的合作，你的16进制颜⾊正确"}).regexValidator({regexp:"color",datatype:"enum",onerror:"16进制颜⾊格式不正确"});确"}).regexValidator({regexp:"ip4",datatype:"enum",onerror:"ip4格式不正确"});$("#fk").formValidator({onshow:"请输⼊⾮空字符",oncorrect:"谢谢你的合作，你的⾮空字符正确"}).regexValidator({regexp:"notempty",datatype:"enum",onerror:"⾮空字符格式不正确"});$("#tp").formValidator({onshow:"请输⼊图⽚名",oncorrect:"谢谢你的合作，你的图⽚名正确"}).regexValidator({regexp:"picture",datatype:"enum",onerror:"图⽚名格式不正确"});$("#rar").formValidator({onshow:"请输⼊压缩⽂件名",oncorrect:"谢谢你的合作，你的压缩⽂件名正确"}).regexValidator({regexp:"rar",datatype:"enum",onerror:"压缩⽂件名格式不正确"});$("#qq").formValidator({onshow:"请输⼊QQ号码",oncorrect:"谢谢你的合作，你的QQ号码正确"}).regexValidator({regexp:"qq",datatype:"enum",onerror:"QQ号码格式不正确"});$("#dh").formValidator({onshow:"请输⼊国内电话",onfocus:"例如：0577-********或省略区号88888888",oncorrect:"谢谢你的合作，你的国内电话正确"}).regexValidator({regexp:"tel",datatype:"enum",onerror:"国内电话格式不正确"});$("#yhm").formValidator({onshow:"请输⼊⽤户名",oncorrect:"谢谢你的合作，你的⽤户名正确"}).regexValidator({regexp:"username",datatype:"enum",onerror:"⽤户名格式不正确"});$("#zm").formValidator({onshow:"请输⼊字母",oncorrect:"谢谢你的合作，你的字母正确"}).regexValidator({regexp:"letter",datatype:"enum",onerror:"字母格式不正确"});$("#dxzm").formValidator({onshow:"请输⼊⼤写字母",oncorrect:"谢谢你的合作，你的⼤写字母正确"}).regexValidator({regexp:"letter_u",datatype:"enum",onerror:"⼤写字母格式不正确"});$("#xxzm").formValidator({onshow:"请输⼊⼩写字母",oncorrect:"谢谢你的合作，你的⼩写字母正确"}).regexValidator({regexp:"letter_l",datatype:"enum",onerror:"⼩写字母格式不正确"});$("#sfz").formValidator({onshow:"请输⼊⾝份证",oncorrect:"谢谢你的合作，你的⾝份证正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"⾝份证格式不正确"});});</script><style type="text/css" media="all">body,div{font-size:12px; margin:10px;}</style></head><body><h2>如何调⽤扩展库</h2><p>正则表达式⽰例</p><p><a href="">猫冬的博客</a></p><form action="" method="post" name="form1" id="form1"><table border="0px" style="font-size:12px"><tr><td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td></tr><tr><td align="right">⾝份证(正则表达式库):</td><td><input name="sfz" type="text" id="sfz" /></td><td><div id="sfzTip" style="width:300px"></div></td></tr><tr><td align="right">⾝份证(外部函数):</td><td><input type="text" id="sfz1" style="width:120px" /></td><td><div id="sfz1Tip" style="width:300px"></div></td></tr><tr><td align="right">整数:</td><td><input type="text" id="zs" style="width:120px" /></td><td><div id="zsTip" style="width:300px"></div></td></tr><td><input type="text" id="fzs" style="width:120px" /></td> <td><div id="fzsTip" style="width:300px"></div></td></tr><tr><td align="right">数字:</td><td><input type="text" id="sz" style="width:120px" /></td> <td><div id="szTip" style="width:300px"></div></td></tr><tr><td align="right">正数（正整数 + 0）:</td><td><input type="text" id="zs1" style="width:120px" /></td> <td><div id="zs1Tip" style="width:300px"></div></td></tr><tr><td align="right">负数（负整数 + 0）:</td><td><input type="text" id="fs" style="width:120px" /></td> <td><div id="fsTip" style="width:300px"></div></td></tr><tr><td align="right">浮点数:</td><td><input type="text" id="fds" style="width:120px" /></td> <td><div id="fdsTip" style="width:300px"></div></td></tr><tr><td align="right">正浮点数:</td><td><input type="text" id="zfds" style="width:120px" /></td> <td><div id="zfdsTip" style="width:300px"></div></td></tr><tr><td align="right">负浮点数:</td><td><input type="text" id="ffds" style="width:120px" /></td> <td><div id="ffdsTip" style="width:300px"></div></td></tr><tr><td align="right">⾮负浮点数（正浮点数 + 0）:</td><td><input type="text" id="fffds" style="width:120px" /></td> <td><div id="fffdsTip" style="width:300px"></div></td></tr><tr><td align="right">⾮正浮点数（负浮点数 + 0）:</td><td><input type="text" id="fzfds" style="width:120px" /></td> <td><div id="fzfdsTip" style="width:300px"></div></td></tr><tr><td align="right">颜⾊:</td><td><input type="text" id="ys" style="width:120px" /></td> <td><div id="ysTip" style="width:300px"></div></td></tr><td><input type="text" id="sj" style="width:120px" /></td> <td><div id="sjTip" style="width:300px"></div></td></tr><tr><td align="right">邮编:</td><td><input type="text" id="yb" style="width:120px" /></td> <td><div id="ybTip" style="width:300px"></div></td></tr><tr><td align="right">⾮空:</td><td><input type="text" id="fk" style="width:120px" /></td> <td><div id="fkTip" style="width:300px"></div></td></tr><tr><td align="right">图⽚:</td><td><input type="text" id="tp" style="width:120px" /></td> <td><div id="tpTip" style="width:300px"></div></td></tr><tr><td align="right">压缩⽂件:</td><td><input type="text" id="rar" style="width:120px" /></td> <td><div id="rarTip" style="width:300px"></div></td></tr><tr><td align="right">ip4:</td><td><input type="text" id="ip4" style="width:120px" /></td> <td><div id="ip4Tip" style="width:300px"></div></td></tr><tr><td align="right">QQ号码:</td><td><input type="text" id="qq" style="width:120px" /></td> <td><div id="qqTip" style="width:300px"></div></td></tr><tr><td align="right">国内电话:</td><td><input type="text" id="dh" style="width:120px" /></td> <td><div id="dhTip" style="width:300px"></div></td></tr><tr><td align="right">⽤户名:</td><td><input type="text" id="yhm" style="width:120px" /></td> <td><div id="yhmTip" style="width:300px"></div></td></tr><tr><td align="right">字母:</td><td><input type="text" id="zm" style="width:120px" /></td> <td><div id="zmTip" style="width:300px"></div></td></tr><td align="right">⼩写字母:</td><td><input type="text" id="xxzm" style="width:120px" /></td> <td><div id="xxzmTip" style="width:300px"></div></td></tr><tr><td align="right">⾝份证:</td><td><input type="text" id="sfz" style="width:120px" /></td> <td><div id="sfzTip" style="width:300px"></div></td></tr><tr></table></form></body></html>版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。

formvalidator 参数

FormValidator 参数什么是 FormValidatorFormValidator 是一个用于验证表单数据的 JavaScript 库。

它提供了一组功能强大的参数，可以帮助开发人员快速、准确地验证用户输入的数据。

FormValidator 可以用于各种类型的表单，包括登录表单、注册表单、支付表单等。

FormValidator 参数介绍1. required•类型：boolean•默认值：false该参数用于指定字段是否为必填字段。

当该参数为 true 时，表示该字段必须填写才能通过验证。

2. minLength•类型：number•默认值：null该参数用于指定字段的最小长度。

当字段的长度小于 minLength 时，验证将失败。

3. maxLength•类型：number•默认值：null该参数用于指定字段的最大长度。

当字段的长度大于 maxLength 时，验证将失败。

4. pattern•类型：string•默认值：null该参数用于指定字段的验证规则。

可以使用正则表达式或预定义的验证规则。

当字段不符合 pattern 的规则时，验证将失败。

5. custom•类型：function•默认值：null该参数用于指定自定义的验证函数。

开发人员可以在该函数中编写自己的验证逻辑。

当字段不满足自定义验证函数的条件时，验证将失败。

使用 FormValidator 参数下面是一个使用 FormValidator 参数的例子：const form = document.querySelector('#myForm');const validator = new FormValidator(form, {fields: [{name: 'username',required: true,minLength: 3,maxLength: 20,pattern: /^[a-zA-Z0-9_]+$/,custom: (value) => {// 自定义验证逻辑return value !== 'admin';},},{name: 'password',required: true,minLength: 6,maxLength: 20,},{name: 'email',required: true,pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,},],});form.addEventListener('submit', (event) => {event.preventDefault();if (validator.validate()) {// 表单验证通过form.submit();} else {// 表单验证失败// 显示错误信息for (const field of validator.fields) {if (!field.isValid) {console.log(`${}: ${field.error}`);}}}});在上面的例子中，我们创建了一个表单验证器validator，并将其绑定到了一个表单元素form上。

表单验证jquery插件formvalidator使用方法详解手册

第三方手册——jQuery formValidator手册PHPCMS V9中使用的表单验证框架为jQuery formValidator什么是jQuery formValidator？jQuery formValidator表单验证插件是客户端表单验证插件。

在做B/S开发的时候，我们经常涉及到很多表单验证，例如新用户注册，填写个人资料，录入一些常规数据等等。

在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来进行表单元素的校验，而这些校验在平时开发中不停的重复书写。

常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。

一般要判断的表单元素比较多，开发过程就显得枯燥无味——重复的代码不断重复，而且可能还要兼容多种浏览器，更多的考虑因素使人头疼不已。

由于每个要校验的页面虽然逻辑基本相同，但是在大多数情况下，出于种种原因，开发者宁愿再编写一套JS文件，为了便于管理。

jQuery formValidator表单插件致力于改善这一过程。

你只关心业务逻辑，而无需关系实现过程,只需简单的配置，无需写代码就能实现表单的检验。

它包括常规检验功能和可扩展校验功能。

针对每个表单元素你只需要写一行配置信息就能完成校验。

而这些配置信息无需写入表单元素，实现了js代码和html代码的分离。

这样做的好处，使B/S开发过程中，分工更加明确，页面设计着只需关心他的页面（设计的时候不必担心把脚本弄坏了），javascript开发者只需关心脚本的开发。

而插件本身包含的校验方式可以有无数种，只要你扩展正则表达式和函数。

本插件于同类校验插件最大的区别：校验功能可以扩展；实现了校验代码于html代码的完全分离；你只需写一行配置信息就能完成一个表单元素的所有校验。

插件本身提供了很多回调函数，使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。

在同一个页面你可以拥有很多个校验组，你只需在提交的按钮那里调用 return jQuery.formValidator.pageIsValid('校验组号') 来完成多个组的校验，互不干扰。

jqueryvalidator验证自定义方法

jqueryvalidator验证自定义方法jQueryValidator是一款优秀的表单验证插件，它有许多内置的验证规则，但有时候我们需要自定义一些验证规则。

这篇文章将介绍如何使用 jQuery Validator 验证自定义方法。

首先，我们需要定义一个自定义验证方法。

假设我们要验证一个文本框中的值是否为偶数，可以这样写：```$.validator.addMethod('even', function(value, element) { return this.optional(element) || value % 2 == 0;}, '请输入偶数');```上面的代码中，我们定义了一个名为 'even' 的验证方法，它接受两个参数：value 和 element。

value 是文本框中的值，element 是文本框的 DOM 元素。

在方法的实现中，我们使用了 JavaScript 的取模运算符（%）来判断 value 是否为偶数。

如果是偶数，返回 true；否则返回 false。

第三个参数是错误消息，当验证失败时，jQuery Validator 会显示这个消息。

接下来，我们需要在表单验证规则中使用这个自定义方法。

假设我们有一个文本框的 id 为 'number'，可以这样写：```$('#form').validate({rules: {number: {required: true,even: true}}});```上面的代码中，我们使用了 jQuery 的 validate 方法来初始化表单验证，然后在 rules 对象中，定义了一个名为 'number' 的验证规则，它要求文本框必填，并且要求输入的值为偶数。

现在，我们已经可以使用 jQuery Validator 验证自定义方法了。

用法大全

jQuery formValidator使用说明说明：jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面的分离。

对一个表单对象，你只需要写一行代码就可以轻松实现20种以上的脚本控制。

现支持一个表单元素累加很多种校验方式,采用配置信息的思想，而不是把信息写在表单元素上，能比较完美的实现ajax请求。

并结合jquery.boxy实现遮罩提示。

jQueryformValidator3.3表单验证文档说明

jQueryformValidator3.3表单验证文档说明jQuery formValidator3.3表单验证文档说明一、前言jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。

你可以划分多个校验组，每个组的校验都是互不影响。

对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。

二、验证方式1、inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）；2、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型;3、ajaxValidator（通过ajax到服务器上做数据校验）；4、regexValidator（提供可扩展的正则表达式库）;5、functionValidator（可使用外部函数来做校验）；三、如何引用到页面1、加载jQuery类库；2、加载插件的样式库//前面两步不分先后，如果你是自动构建提示层，请加载validatorAuto.css；3、加载验证插件//这步引用必须在jQuery-1.4.2.js之后；4、加载扩展库//建议将所有有关正则验证方面的格式，其它扩展的验证函数统一写到该文件中；四、具体实战界面效果：五、属性参照initConfig:参数详解主要是设置全局参数和判断是否通过校验函数名函数说明$.formValid ator.initCon fig 参数：配置类型属性默认值说明validatorgroup"1" 你要针对哪个组进行配置formid "" 要自动注册pageIsValid函数的表单ID号alertmessagefalse 是否弹出窗口autotip false 是否自动构建提示层errorfocustrue发生错误的时候，第一个出错控件是否获得焦点forcevalid true 是否一直输入正确为止才允许离开焦点wideword true 是否把一个全角字符当做2个长度onsuccess null 该组校验通过后的回调函数,返回false，阻止表单的提交submitoncefalse 校验通过后，是否灰掉所有的提交按钮onerror null该组校验失败后的回调函数，有两个参数参数1一个校验没有通过的错误信息参数2 一个校验没有通过的元素对象debug false 是否处于调试模式。

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

jQuery表单验证插件formValidation实现个性化错误提示
上期在[jQuery插件Validate验证表单实现javascript表单验证功能]和[jQuery插件Validation验证表单实现javascript表单智能验证功能]中分别介绍了两个实现表单验证的jQuery插件，这里介绍另外一个表单验证插件formValidation，这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息，显示在表单元素右上角类似于提示条
<option value="4">biuuu_4</option>
</select>
四，验证电话号码
<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>
<script src="jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />
<input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/>

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

jQuery formValidator使用说明
说明：jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js 脚本于页面的分离。

对一个表单对象，你只需要写一行代码就可以轻松实现20种以上的脚本控制。

现支持一个表单元素累加很多种校验方式,采用配置信息的思想，而不是把信息写在表单元素上，能比较完美的实现ajax请求。

并结合jquery.boxy实现遮罩提示。

一、所需元素
jquery-1.3.2.js （需要jquery-1.3.2以上版本）
formValidator.js （表单验证基础js）
formValidatorRegex.js （表单验证所需正则js）
jquery.boxy.js （遮罩提示js）
validator.css （表单验证样式）
boxy.css （遮罩提示样式）
二、使用说明
a)使用方法
i.加载所需js和css文件
ii.初始化验证控件
（$.formValidator.initConfig({formid:"form1",onerror:functi
on(msg){Boxy.alert("<center>"+msg+"</center>",null,{title:
"提示信息"});}});）
iii.表单验证
（$("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了
"}).inputValidator({min:1,max:99,type:"value",onerrormin:"你输入的值必须大于等于1",onerror:"年龄必须在1-99之间，请确认"}).defaultPassed();
});）
b)参数说明：
i.初始化验证控件：initConfig
1.Formid （form 表单 id）
2.Debug （是否使用debug模式，默认false）
3.Validatorgroup （验证表单分组）
4.Alertmsg （alert输出提示信息，默认false）
5.Boxyalertmsg （boxy.alert输出提示信息，默认false）
6.Validobjectids （多个表单id，用“,”分隔）
7.Onsuccess （成功时回调涵数）
8.Onerror （失败时回调涵数）
9.Submitonce （是否提交表单，默认false）
10.Autotip （是否使用自动验证提示，默认false）
ii.表单验证
验证方式有如下几种
1.formValidator （基础验证）
初始参数：
validatorgroup : "1",
empty :false,
submitonce : false,
automodify : false,
onshow :"请输入内容",
onfocus: "请输入内容",
oncorrect: "输入正确",
onempty: "输入内容为空",
defaultvalue : null,
bind : true,
validatetype : "InitValidator",
tipcss :
{
"left" : "10px",
"top" : "1px",
"height" : "20px",
"width":"250px"
},
triggerevent:"blur"
2.inputValidator (input验证)
初始参数:
isvalid : false,
min : 0,
max : 99999999999999,
type : "size",
onerror:"输入错误",
validatetype:"InputValidator",
empty:{leftempty:true,rightempty:true,leftemptyerror:nu ll,rightemptyerror:null}
pareValidator （比较验证）
初始参数：
isvalid : false,
desid : "",
operateor :"=",
onerror:"输入错误",
validatetype:"CompareValidator"
4.ajaxValidator (ajax验证)
初始参数：
isvalid : false,
lastValid : "",
type : "GET",
url : "",
addidvalue : true,
datatype : "html",
data : "",
async : true,
cache : false,
beforesend : function(){return true;},
success : function(){return true;},
complete : function(){},
processdata : true,
error : function(){},
buttons : null,
onerror:"服务器校验没有通过",
onwait:"正在等待服务器返回数据",
validatetype:"AjaxValidator"
5.regexValidator （正则验证）
初始参数：
isvalid : false,
regexp : "",
param : "i",
datatype : "string",
onerror:"输入的格式不正确",
validatetype:"RegexValidator"
三、注意事项
formValidatorRegex.js方便扩展，可把常用的正则加入这个文件。

Bug：还有一个ajax验证时在没有改变值的情况下，失去焦点时没有进行验证。

目前不影响使用。

例子请参考register.html。