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

最新推荐文章于 2024-03-21 16:24:44 发布

任聪聪

最新推荐文章于 2024-03-21 16:24:44 发布

阅读量7.4k

点赞数 2

分类专栏： Javascript 文章标签： jquery html 插件实例表单

本文链接：https://blog.csdn.net/hj960511/article/details/52838879

版权

Javascript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

文档日期：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
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Validform实时表单验证插件实例使用

文档日期：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/3861587html中的代码实例<!d
复制链接

扫一扫