一:引入
<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/Validform_v5.3.2_min.js" ></script>
二:绑定
<form action="" id="form"> 账号:<input type="text" name="" datatype="s5-16" nullmsg="空!" errormsg="错!"/><br/> 密码:<input type="password" datatype="s5-16" nullmsg="空!" errormsg="错!"/><br /> <input type="submit" value="提交" /><br /> </form>
三:启动验证
<script> $(function(){ $("#form").Validform(); }); </script>
四:常用属性
1.datatype :正则表达式
内置基本的datatype类型有: * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
*6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
2.nullmsg:当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。
3.sucmsg:成功提示
4.errormsg错误信息
5.ignore:没有输入内容不验证
6:recheck="password1",那么它就会拿当前元素的值跟该表单下,name为"password1"的元素比较
7:tip表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。tip属性就是用来实现这个效果。它通常和altercss搭配使用。altercss
8:它需要和tip属性配合使用,altercss指定的样式名,会在文本框获得焦点时被删除,没有输入内容而失去焦点时重新加上。
9:ajaxurl
指定ajax实时验证的后台文件的地址。
后台页面如valid.php文件中可以用 $_POST["param"] 接收到值,Ajax中会POST过来变量param和name。param是文本框的值,name是文本框的name属性。
5.2版本开始,可以在ajaxurl指定的url后绑定参数,如:ajaxurl="valid.php?myparam1=value1&myparam2=value2"; 5.3.1开始,地址后面附带的参数内部不再做另外解析,仍附带在地址后面,所以需要用GET方式去获取地址后面带的参数。
5.3之前的版本中,该文件输出的字符会作为错误信息显示在页面上,如果验证通过需输出小写字母"y"。
在5.3版中,实时验证的返回数据做了调整,须是含有status值的json数据!跟callback里的ajax返回数据格式统一,建议不再返回字符串"y"或"n"。目前这两种格式的数据都兼容。
10:插件的使用:
在表单元素上绑定plugin="datepicker"就可以,初始化直接这样: $(".demoform").Validform();
$(".demoform").Validform().config={ ajaxpost:{ url:"", timeout:1000, ..., success:function(data,obj){ //data是返回的json数据; //obj是当前表单的jquery对象;
$("#name")[0].validform_valid="false"。?//手动设置验证值 }, error:function(data,obj){ //data是{ status:**, statusText:**, readyState:**, responseText:** }; //obj是当前表单的jquery对象; } }, ajaxurl:{ success:function(data,obj){ //data是返回的json数据; //obj是当前正做实时验证表单元素的jquery对象; //注意:5.3版中,实时验证的返回数据须是含有status值的json数据! //跟callback里的ajax返回数据格式统一,建议不再返回字符串"y"或"n"。目前这两种格式的数据都兼容。 } } }