当前位置: 首页 > 工具软件 > validForm-js > 使用案例 >

Validform.js的使用

应俊爽
2023-12-01

一:引入

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

 

转载于:https://www.cnblogs.com/jiang--nan/p/7815593.html

 类似资料: