Validform.js的使用

Posted 2020-10-14 江-南

一：引入

<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"。目前这两种格式的数据都兼容。
        }
    }
}