Validform实时表单验证插件实例使用

来源：互联网发布：淘宝助手导入csv失败编辑：程序博客网时间：2024/04/28 19:20

文档日期：2016-10-17
适用范围：所有类型网站表单验证
插件版本：v5.3.2
插件地址：http://validform.rjboy.cn/Validform/v5.3.2/Validform_v5.3.2_min.js
jquery地址：http://download.csdn.net/detail/bennygreat/3861587

html中的代码实例

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="css/style.css">    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>    <script type="text/javascript" src="js/Validform_v5.3.2.js"></script></head><body>    <div class="main">        <div class="box">            <form action="test.php" id="myForm">                <ul>                    <li>账号：                        <input type="text" name="number" ajaxurl="number.php" datatype="s5-16" errormsg="昵称至少5个字符,最多16个字符！">                        <div class="Validform_checktip"></div>                    </li>                    <li>密码：                        <input type="password" name="password" datatype="*6-15" errormsg="密码范围在6~15位之间！">                        <div class="Validform_checktip"></div>                    </li>                    <li>邮箱：                        <input type="email" name="email" datatype="e" errormsg="邮箱格式不正确！">                        <div class="Validform_checktip"></div>                    </li>                    <li>内容：                        <textarea name="content" id="" cols="30" rows="10" tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" altercss="gray"></textarea>                        <div class="Validform_checktip"></div>                    </li>                    <li>性别：                        <input type="radio" class="radio" name="sex" value='1' datatype="*" nullmsg="请选择性别！" errormsg="请选择性别！" >男                         <input type="radio" class="radio" name="sex" value='0' >女                         <div class="Validform_checktip"></div>                    </li>                    <li>                        select：                        <select name="select" datatype="*" nullmsg="请选择！" errormsg="请选择！" >                            <option value="开启">开启</option>                            <option value="关闭">关闭</option>                        </select>                        <div class="Validform_checktip"></div>                    </li>                    <li>爱好：                        <input type="checkbox" class="check" name="hopoy[]" value="足球" datatype="*" nullmsg="请选择爱好！" errormsg="请选择性别！" >足球                        <input type="checkbox" class="check" name="hopoy[]" value="篮球" >篮球                        <input type="checkbox" class="check" name="hopoy[]" value="排球" >排球                        <div class="Validform_checktip"></div>                    </li>                    <li><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></li>                </ul>                <div id="dump"></div>            </form>        </div>    </div><script>    $(function() {        $("#myForm").Validform({            tiptype:function(msg,o,cssctl){                if(!o.obj.is("form")){                    var objtip=o.obj.siblings(".Validform_checktip");                    cssctl(objtip,o.type);                    objtip.text(msg);                }else{                    var objtip=o.obj.find("#dump");                    cssctl(objtip,o.type);                    objtip.text(msg);                }            },            ajaxPost:true        });    })</script></body></html>

test.php文件代码实例

<?php    sleep(3);    if($_POST) {        echo '{"info":"数据提交成功！","status":"y"}';    }?>

number.php代码实例

<?php    sleep(1);    if($_POST){        if($_POST["param"] == "abc123"){            echo '{"info":"用户名重复！","status":"n"}';        }else{            echo '{"info":"通过信息验证！","status":"y"}';        }    }?>

style.css样式代码

/*全局注释*/*{    padding: 0px;    marign:0px;}ul,li{    list-style: none;}/*表单部分*/.main{    margin-top:30px;     background: #fff;}.main .box{    width: 50%;    margin: 0 auto;}.main .box ul li{    margin-top: 5px;}.main .box ul li input{    height: 20px;    width: 140px;}.main .box ul li input.radio,.main .box ul li input.check{    width: 13px;    height: 13px;}/*固定文本框大小*/.main .box ul li textarea{    resize: none;    width: 200px;    height: 100px;    max-width: 200px;    max-height: 100px;}/*表单提交按钮*/.main .box ul li input.btn{    margin:5px;     width: 40px;    height: 30px;}#dump{    width: 50%;    margin:10px auto;   }/*提示信息*/.Validform_checktip{    /*display: none;*/    font-size: 14px;    padding-left: 20px;} .Validform_wrong{    font-size: 14px;    color: red;    padding-left: 20px;}

2 0