阿紫
分类
存档
热门文章
最新评论
最新留言
链接
公告
标签云
计数器
91863
搜索
说点啥吧
嗯...搬家了,以后不来这了,告下别
validationEngine — jquery强大的表单验证插件(转)
引入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:"keyup blur", //will validate on keyup and blur 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, we received your inscription!", ajaxSubmitExtraData: "securityCode=38709238423&name=john", success : false, failure : function() {} })
这几个参数很好理解。
- ajaxSubmit: true, 提交表单使用ajax提交
- ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
- ajaxSubmitMessage 成功后显示的信息
- ajaxSubmitExtraData 参数
这里需要对后台脚本返回的数据进行下说明:
返回的数据格式是json。
出现一个错误,产生一个数组,如下:
- $arrayError[0][0] = "#email"; // FIELDID
- $arrayError[0][1] = "Your email do not match.. whatever it need to match"; // TEXT ERROR
- $arrayError[0][2] = "error"; // BOX COLOR