当前位置：首页 > 资讯 > 技术文档

jQuery 表单验证扩展(四)

时间：2021-11-07 09:49 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery 表单验证扩展(四)

周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低，不知道是文章太失水准还是什么其他原因，这里写文章只是为了分享一下自己写代码的心得，同时也是巩固自己所学的东西!如果文章中存在问题，请大家多多斧正！本篇文章介绍jQuery 表单验证扩展中的控件值的比较 [b](一). 存在的问题 [/b]这篇文章和第一篇中提到的控件值之间的比较没有多大的区别，唯一更近的就是在样式的处理。同时就是对代码进行了简化。但是这里还是单独拿出来讲解一下，此文非常简单，所以不会有大篇幅的讲解。 [b](二). 参数介绍 [/b]onFocusText:获得焦点提示文字 onFocusClass:获得焦点样式 onEmptyText:当输入项为空显示文字 onEmptyClass:当输入项为空显示样式 onErrorText:验证错误显示文字 onErrorClass:输入验证错误显示样式 onSuccessText:输入成功显示文本 onSuccessClass:输入成功显示样式 comType:比较类型 dataType:输入比较内容的数据类型 dataType:输入比较内容的数据类型 comId:相比较的目标控件ID targetId:用于显示提示信息的控件id 这里的比较类型分为如下几种: “==” “！=” “>” “>=” “<” <=“” 比较的数据类型分为如下几种: "text" "number" "date" 这里对date 数据类型还没有做任何处理，在后期过程中更新 [b](三). 控件值之间的比较源码解析[/b] jQuery控件值之间的比较源码解析

[url=new_file.css]<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="jquery-extend-1.0.0.js"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $("#txtPass2").checkCompare({ onFocusText:"要和上面的填写一样哦", onFocusClass:"notice", onEmptyText:"不允许为空，你要听话点", onEmptyClass:"error", onErrorText:"验证错误了，请你认真填写", onErrorClass:"error", onSuccessText:"恭喜啊成功了", onSuccessClass:"correct", comType:"==", dataType:"text", comId:"txtPass1", targetId:"txtPass2Tip" }); }); </script> </head> <body> <p> <label>密码1:</label><input type="text" id="txtPass1" value=""/><span id="txtPass1Tip"></span> </p> <p> <label>密码2:</label><input type="text" id="txtPass2" value=""/><span id="txtPass2Tip"></span> </p> </body> </html>

数字之间的验证 [img]http://files.jb51.net/upload/201010/20101020211325971.jpg[/img] 数字验证获得焦点提示作用 [img]http://files.jb51.net/upload/201010/20101020211325382.jpg[/img] 数字验证失去焦点验证失败 [img]http://files.jb51.net/upload/201010/20101020211325166.jpg[/img] 数字验证失去焦点验证成功

[u]复制代码[/u][/url] 代码如下:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="new_file.css"/> <script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="jquery-extend-1.0.0.js"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $("#txtPass2").checkCompare({ onFocusText:"结果要比前面的大", onFocusClass:"notice", onEmptyText:"不允许为空，你要听话点", onEmptyClass:"error", onErrorText:"验证错误了，请你认真填写", onErrorClass:"error", onSuccessText:"恭喜啊成功了", onSuccessClass:"correct", comType:">", dataType:"number", comId:"txtPass1", targetId:"txtPass2Tip" }); }); </script> </head> <body> <p> <label>密码1:</label><input type="text" id="txtPass1" value=""/><span id="txtPass1Tip"></span> </p> <p> <label>密码2:</label><input type="text" id="txtPass2" value=""/><span id="txtPass2Tip"></span> </p> </body> </html>

文章内容不想做过多的解释了，此文非常简单，相对于前面几篇文章来说。表单验证扩展不断更新中，后续期待............

全部评论(0)

上一篇：jQuery validata插件实现方法
下一篇：jQuery中get()方法用法实例

资讯排行榜
更多>>