validationEngine中文版 — jquery…
来源:互联网 发布:网络机顶盒刷机工具 编辑:程序博客网 时间:2024/04/24 08:28
这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(万恶的IE)。
官方下载地址:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
普通验证的例子:http://www.position-relative.net/creation/formValidator/
ajax验证的例子:http://www.position-relative.net/creation/formValidator/demoSubmit.html
一:简单说明下使用教程:
引入jquery和插件js、css
- <link rel="stylesheet"href="css/validationEngine.jquery.css" type="text/css"media="screen"charset="utf-8"/>
- <script
src="js/jquery.js" type="text/javascript"></script> - <script
src="js/jquery.validationEngine-en.js" type="text/javascript"></script> - <script
src="js/jquery.validationEngine.js" type="text/javascript"></script>
jquery.validationEngine-en.js是语言文件,所有的提示都在这个文件找的到,可以很方便的转成其他语言,同时你也可以在这个文件内定制属于自己的验证规则。
初始化插件
- $(document).ready(function(){
- $("#formID").validationEngine()
- })
验证规则是写在表单元素的class属性内。比如下面:
- <input value=""class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]"type="text"name="user"id="user"/>
验证规则非常多样,基本上包含了所有的数据类型的验证。
所有的验证规则写在validate[]内,有多种验证,用逗号隔开,这里简要说明下常用的验证规则。
- required:值不可以为空
- length[0,100] :文字允许长度
- confirm[fieldID]:匹配其他的表单元素的值,fieldID就是其他表单元素的id,这个主要用于再次确认密码
- telephone :数据格式要求符合电话格式
- email : 数据格式要求符合email 格式
- onlyNumber :只允许输入数字
- noSpecialCaracters :不允许出现特殊字符
- onlyLetter : 只能是字母
- date :必须符合日期格式YYYY-MM-DD
你还可以在点击提交按钮后才触发验证。
- $("#formID").validationEngine({
- inlineValidation: false,
- success :
false, - failure : function()
{ callFailFunction() } - })
默认的是在鼠标失去焦点后才开始验证,也就是绑定的是blur事件,那如何改变呢?看下面的配置。
- $("#formID").validationEngine({
- validationEventTriggers:"keyupblur",
//will validate on keyup andblur - success :
false, - failure : function()
{ callFailFunction() } - })
validationEventTriggers属性就是修改绑定事件,上面是增加了个keyup,也就是键盘按键起来就触发验证。
修改提示层的位置
- $("#formID").validationEngine({
- promptPosition: "topRight",// OPENNING BOX POSITION, IMPLEMENTED:topLeft, topRight, bottomLeft,
centerRight,bottomRight - success :
false, - failure : function()
{ - })
promptPosition就是控制位置,有5种模式:topLeft, topRight, bottomLeft,centerRight, bottomRight
ajax验证模式
- $("#formID").validationEngine({
-
ajaxSubmit:true, -
ajaxSubmitFile: "ajaxSubmit.php", -
ajaxSubmitMessage: "Thank you, wereceived your inscription!", -
ajaxSubmitExtraData: "securityCode=38709238423&name=john", -
success : false, -
failure :function() {} - })
这几个参数很好理解。
- ajaxSubmit: true, 提交表单使用ajax提交
- ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
- ajaxSubmitMessage 成功后显示的信息
- ajaxSubmitExtraData 参数
这里需要对后台脚本返回的数据进行下说明:
返回的数据格式是json。
出现一个错误,产生一个数组,如下:
- $arrayError[0][0]= "#email";
- $arrayError[0][1]= "Your email do notmatch.. whatever it need to match";
- $arrayError[0][2]= "error";
二:修改过的地方
解决ie6下select遮挡div的办法
jquery.validationEngine.js要修改的地方:
- calculatedPosition.callerTopPosition
+= "px"; -
calculatedPosition.callerleftPosition += "px"; -
calculatedPosition.marginTopSize += "px"; -
//add matychen -
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) { -
$(divFormError).append(' class="iframe" frameborder="0" scr="javascript:false;"></iframe>'); -
} -
// add matychen -
$(divFormError).css({ -
"top": calculatedPosition.callerTopPosition, -
"left": calculatedPosition.callerleftPosition, -
"marginTop": calculatedPosition.marginTopSize, -
"opacity": 0 -
});
validationEngine.jquery.css里面加入以下代码:
- .iframe
{ -
position: absolute; -
width: expression_r( -
height: expression_r( -
z-index: - -
top: expression_r(((parseInt( -
left: expression_r(((parseInt( - }
formvalidator.html如下:
- <!DOCTYPE
HTML "-//IETF//DTDPUBLIC LEVEL1//EN" > - <html>
-
<head> -
<title>formvalidator.html</title> -
-
<meta http-equiv= content= "keyword1,keyword2,keyword3"> -
<meta http-equiv= content= "thisis >my page" -
<meta http-equiv= content= "text/html;charset=UTF-8" > -
<link rel= href= "formValidator/css/validationEngine.jquery.css"type= "text/css"/> -
<link rel= href= "formValidator/css/template.css"type= "text/css"/> -
<script src= type= "text/javascript"></script> -
<script src= type= "text/javascript"></script> -
<script src= type= "text/javascript"></script> -
-
- <script>
-
$(document).ready(function() { -
$( -
validationEventTriggers: validationEventTriggers:"keyup blur", -
inlineValidation: -
success : -
promptPosition: topRight, bottomLeft, centerRight, bottomRight -
: function() { alert("验证失败,请检查。"); }//验证失败时调用的函数 -
: function() { callSuccessFunction() },//验证通过时调用的函数 -
}); -
}); -
</script> -
</head> -
-
<body> -
<form id= class="formular" method= "post"action= ""> -
<fieldset> -
<legend>User informations</legend> -
<label> -
<span>Desired username (ajax validation, only karnius is available) : </span> -
<input value= class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type= "text"name= "user"id= "user"/> //ajax验证用户名的地方 -
</label> -
<label> -
<span>First name (optional)</span> -
<input value= text-input" type= "text"name= "firstname"id= "firstname"/> -
</label> -
<label> -
<span>Last name : </span> -
<input value= text-input" type= "text"id= "data[Use6][preferedColor]"name= "lastname"/> -
</label> -
<div> -
<span>Radio Groupe : <br /></span> -
<span>radio </span> -
<input radio" type= "radio"name= "data[User][preferedColor]"id= value= -
<span>radio </span> -
<input radio" type= "radio"name= "data[User][preferedColor]"id= value= -
<span>radio </span> -
<input radio" type= "radio"name= "data[User][preferedColor]"id= value= -
</div> -
<div> -
<span>Minimum checkbox : <br /></span> -
-
<input checkbox" type= "checkbox"name= id= "data[User3][preferedColor]"value= "5"> -
<input checkbox" type= "checkbox"name= id= "data[User3][preferedColor]"value= "5"> -
-
<input checkbox" type= "checkbox"name= "data[User3][preferedColor]"id= "maxcheck2"value= -
-
<input checkbox" type= "checkbox"name= "data[User3][preferedColor]"id= "maxcheck3"value= -
</div> -
<label> -
<span>Date : (format YYYY-MM-DD)</span> -
<input value= text-input" type= "text"name= "date"id= /> -
</label> -
<label> -
<span>Favorite sport -
<select name= id= "sport"id= > -
<option value= a sport</option> -
<option value= -
<option value= -
<option value= -
</select> -
</label> -
<label> -
<span>Favorite sport -
<select name= id= "sport2"multiple class="validate[required]"id= > -
<option value= a sport</option> -
<option value= -
<option value= -
<option value= -
</select> -
</label> -
<label> -
<span>Age : </span> -
<input value= text-input" type= "text"name= "age"id= /> -
</label> -
-
<label> -
<span>Telephone : </span> -
<input value= text-input" type= "text"name= "telephone"id= /> -
</label> -
<label> -
<span>mobilephone : </span> -
<input value= text-input" type= "text"name= "telphone"id= /> -
</label> -
<label> -
<span>chinese : </span> -
<input value= text-input" type= "text"name= "chinese"id= /> -
</label> -
<label> -
<span>url : </span> -
<input value= text-input" type= "text"name= "url"id= /> -
</label> -
<label> -
<span>zipcode : </span> -
<input value= text-input" type= "text"name= "zipcode"id= /> -
</label> -
<label> -
<span>ip : </span> -
<input value= text-input" type= "text"name= "ip"id= /> -
</label> -
<label> -
<span>qq : </span> -
<input value= text-input" type= "text"name= "qq"id= /> -
</label> -
</fieldset> -
<fieldset> -
<legend>Password</legend> -
<label> -
<span>Password : </span> -
<input value= text-input" type= "password"name= "password"id= /> -
</label> -
<label> -
<span>Confirm password : </span> -
<input value= text-input" type= "password"name= "password2"id= /> -
</label> -
</fieldset> -
<fieldset> -
<legend>Email</legend> -
<label> -
<span>Email address : </span> -
<input value= text-input" type= "text"name= "email"id= "email"/> -
</label> -
<label> -
<span>Confirm email address : </span> -
<input value= class="validate[required,confirm[email]] text-input" type= "text"name= "email2"id= /> -
</label> -
</fieldset> -
<fieldset> -
<legend>Comments</legend> -
<label> -
<span>Comments : </span> -
<textarea value= class="validate[required,length[6,300]] text-input" name= "comments"id= "comments"/> </textarea> -
</label> -
-
</fieldset> -
<fieldset> -
<legend>Conditions</legend> -
<div this box doindicates that you accept terms of use. If you not doaccept these terms, not thisuse website : </div> -
<label> -
<span accept terms of use : </span> -
<input checkbox" type= "checkbox"id= name= -
</label> -
</fieldset> - <input
class="submit" type= "submit"value= "Validate& />Send the form!" - <hr/>
- </form>
-
</body> - </html>
jquery.validationEngine-cn.js如下:
-
-
- (function($)
{ -
$.fn.validationEngineLanguage = function() {}; -
$.validationEngineLanguage = { -
newLang: function() { -
$.validationEngineLanguage .allRules = { Add your regex rules here, you can take telephone as an example -
-
非空选项." , -
e" :"*请选择一个单选框." , -
请选择一个复选框." }, -
-
-
长度必须在 ," -
至 ," -
" 之间." }, -
-
-
最多选择 ,//官方文档这里有问题" -
项." }, -
-
-
至少选择 ," -
项." }, -
-
-
两次输入不一致,请重新输入." }, -
-
-
请输入有效的电话号码,如:010-29292929." }, -
-
-
请输入有效的手机号码." }, -
-
-
请输入有效的邮件地址." }, -
-
-
请输入有效的日期,如:2008-08-08." }, -
-
-
请输入有效的IP." }, -
-
-
请输入中文." }, -
-
-
请输入有效的网址." }, -
-
-
请输入有效的邮政编码." }, -
-
-
请输入有效的QQ号码." }, -
-
-
请输入数字." }, -
-
-
请输入英文字母." }, -
-
-
请输入英文字母和数字." }, -
-
ajaxUser;validateId user;validateValue cccc -
帐号可以使用." , -
检查中, ,请稍后..." -
帐号不能使用." }, -
-
-
This ,name is already taken" -
This ,name is available" -
Loading, }please wait" -
} -
} -
} - })(jQuery);
-
- $(document).ready(function()
{ -
$.validationEngineLanguage .newLang() - });
-
-
-
$.ajax({ -
type: -
url: postfile, -
async: -
data: -
beforeSend: function(){ BUILD A LOADING PROMPT IF LOAD TEXT EXIST -
-
-
-
$.validationEngine.buildPrompt(ajaxCaller,$.validationEngine.settings.allrules[customAjaxRule].alertTextLoad, "load"); -
} -
$.validationEngine.updatePromptText(ajaxCaller,$.validationEngine.settings.allrules[customAjaxRule].alertTextLoad, -
} -
} -
},
struts.xml文件:
-
<struts> -
< name= "json"extends="json-default"> -
<!--验证--> -
<action name= class="com.bw30.zjvote.action.ValidateAction" -
method= -
<result type= -
<param name= -
</result> -
</action> -
-
</ - </struts>
validateAction
- public
String vali() { -
ActionContext ac = ActionContext.getContext(); -
HttpServletRequest request = (HttpServletRequest) ac -
.get(ServletActionContext.HTTP_REQUEST); -
String validateId = request.getParameter( -
logger.info( - String validateId=" + validateId); -
-
String validateValue = request.getParameter( -
String validateError = request.getParameter( -
logger.info( - String validateError=" + validateError); -
-
jsonValidateReturn.add(validateId); -
jsonValidateReturn.add(validateError); -
-
jsonValidateReturn.add( -
-
jsonValidateReturn.add( -
SUCCESS; -
}
jquery.validationEngine.js要更改的地方:
- success:
function(data){ //GET SUCCESS DATA RETURN JSON -
data = eval_r( GET JSON DATA FROM PHP AND PARSE IT -
ajaxisError = data.jsonValidateReturn[ -
customAjaxRule = data.jsonValidateReturn[ -
ajaxCaller = $( -
fieldId = ajaxCaller; -
ajaxErrorLength = $.validationEngine.ajaxValidArray.length; -
existInarray = -
-
== "false"){DATA FALSE UPDATE PROMPT WITH ERROR; -
-
_checkInArray( Check if ajax validation alreay used on this field -
-
Add ajax error to stop submit -
$.validationEngine.ajaxValidArray[ajaxErrorLength] = Array( 2); -
$.validationEngine.ajaxValidArray[ajaxErrorLength][ = fieldId; -
$.validationEngine.ajaxValidArray[ajaxErrorLength][ = false; -
existInarray = -
}
用到了jsonplugin-0.32.jar这个包在附件里面,其他struts的包,自己添加。
更多疑问请邮箱至:lsfhack@163.com
- validationEngine中文版 — jquery…
- 【jQuery】validationEngine中文版 — jquery强大的表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- java Struts2 jquery uploadify 多…
- Jquery validationEngine(jquery.validationEngine)
- websocket规范 RFC6455 中文版
- jQuery Mobile 手动显示…
- javascript jquery cons…
- jQuery ajax return语句…
- jquery after append appendTo三个…
- Asterisk-Java 教程(中文版)…
- HDOJ 2045 不容易系列之(3)—— L…
- jquery.validationEngine
- js使用正则表达式
- 农业银行网银证书的控件被阻止的解…
- resource is out of sync with t…
- JS中showModalDialog 详细使用
- Javascript 缺少标识符 字符串或数…
- validationEngine中文版 — jquery…
- js在IE8+兼容String没有trim方法
- 在模式窗口中防止弹出新页面
- 模式窗口参数详解
- js中给移除指定数组元素
- table拖动表格列宽度
- jsp设置页面无缓存
- js 获取浏览器高度和宽度值(多浏览…
- 在JSP页面中随机出现Internet Expl…