js css脚本文件:
html文件头部: <link href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" /> <script language="javascript" src="js/jquery-1.7.2.js" ></script> <script language="javascript" src="js/jquery-ui-1.8.21.custom.min.js" ></script> <script src="js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> <script language="javascript" src="js/date.cfg.js" ></script> <script language="javascript">{literal}
$(document).ready(function(){ $('#biaodanyong').validationEngine({ promptPosition: "bottomLeft",validationEventTriggers:"keyup blur",success : false});$('#shijianyong').datepicker({changeMonth:true,changeYear:true});
});
{/literal}
</script>
/* 解析上面的
- <script>
- {literal} //这个表示在html 文件里面需要添加的;而在php就不需要
- $(document).ready(function() { //页面加载完成后开始运行方括号里面的代码
- $("#biaodanyong").validationEngine({
- validationEventTriggers:"blur", //触发的事件 validationEventTriggers:"keyup blur",
- inlineValidation: true, //是否即时验证,false为提交表单时验证,默认true
- success : false, //为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false
- promptPosition: "topRight", //提示所在的位置,topLeft, topRight, bottomLeft, centerRight, bottomRight
- //failure : function() { alert("验证失败,请检查。"); } //验证失败时调用的函数
- //success : function() { callSuccessFunction() }, //验证通过时调用的函数
- });
- });
- {/literal}
- </script>
*/
日期调用: 1. <form>
2. <input id="shijianyong">
表单调用: 1.<form id="biaodanyong" ....>
2.<input class="validate[required,minSize[3],maxSize[10]]" .... >
(蓝色里面的代码是根据自己需求在 js 文件夹的 languages 文件夹的jquery.validationEngine-zh_CN.js文件里面 选择 。例:required 表示:不可以是空白。 minSize[3] 表示:最少3个字符; maxSize[10] 表示:最多10个字符(方括号里面的数字可以根据自己的需要设置)。 custom[onNumbers] 表示:定义 方括号 里的是: 只能是数字。)
所有的验证规则写在validate[]内,有多种验证,用逗号隔开,这里简要说明下常用的验证规则。
- required:值不可以为空
- length[0,100] :文字允许长度
- confirm[fieldID] :匹配其他的表单元素的值,fieldID就是其他表单元素的id,这个主要用于再次确认密码
- telephone :数据格式要求符合电话格式
- email : 数据格式要求符合email 格式
- onlyNumber :只允许输入数字
- noSpecialCaracters :不允许出现特殊字符
- onlyLetter : 只能是字母
- date :必须符合日期格式YYYY-MM-DD