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>，以上样式可控制错误显⽰效果。
- 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。