js中的表单插件

最新推荐文章于 2021-03-21 17:32:17 发布

YZiAngel

最新推荐文章于 2021-03-21 17:32:17 发布

阅读量633

点赞数

分类专栏：前端工程师文章标签：表单插件

本文链接：https://blog.csdn.net/YZi_Angel/article/details/52739259

版权

前端工程师专栏收录该内容

52 篇文章 0 订阅

订阅专栏

表单对各种程序员来说，并不陌生，我们总会在各种项目中接触到他，表单的布局样式及验证方法，总会耗费我们非常多的时间，为了节省时间和精力，现在我给大家推荐几个插件，只需要简单的调用，表单布局和验证将不再是问题，现在，我们先看一下：

第一个插件bootstrap

链接地址：http://v3.bootcss.com/

使布局更加简单

第二个插件jQuery

链接地址：http://www.w3school.com.cn/jquery/

表单验证的插件是基于jQuery来实现的，所以在用form插件之前要讲jQuery先引入

第三个插件jQuery-form

链接地址：http://jquery.malsup.com/form/

第四个插件是jQuery Validate

链接地址：http://www.runoob.com/jquery/jquery-plugin-validate.html

为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
菜鸟教程提供的 1.14.0 版本下

我们先来看一下效果图：

接下来我们说一下如何使用这些插件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css"/>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="../lib/jquery-form/jquery.form.js"></script>
    <style>
        .error{
            color:red;
            font-size: 12px;
        }
    </style>

</head>
<body>


<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">jquery.validate的使用</h3>
    </div>
    <div class="panel-body">
        <form id="signupForm" method="post" class="form-horizontal" action="">
            <div class="form-group">
                <label class="col-sm-4 control-label" >用户名</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control"  name="username" placeholder="Username" />
                </div>
                <div class="col-sm-3"></div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label" for="email">邮箱</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="email" name="email" placeholder="Email" />
                </div>
                <div class="col-sm-3"></div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label" >密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
                </div>
                <div class="col-sm-3"></div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label" >重复密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control"  name="repassword" placeholder="Confirm password" />
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label" for="email">邮政编码</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control"  name="zip" placeholder="zip" />
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label" >验证码</label>
                <div class="col-sm-5">
                    <div class="input-group" style="width: 200px">
                        <input type="text" name="code" id="code" class="form-control" >
                        <span class="input-group-addon">0000</span>
                    </div>
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <div class="col-sm-5 col-sm-offset-4">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="agree" name="agree" value="agree" />同意许可协议
                        </label>
                    </div>
                </div>
                <div class="col-sm-3"></div>
            </div>

            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-4">
                    <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    $("#signupForm").validate({
        onkeyup:false,
        rules: {
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 6
            },
            repassword: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            zip:{
                required:true,
                postcode:true
            },
            code:{
                required:true,
                remote: {
                    url: "/checkcode",     //后台处理程序
                    type: "post",               //数据发送方式
                    dataType: "json",           //接受数据格式
                    data: {                     //要传递的数据
                        username: function() {
                            return $("#code").val();
                        }
                    }
                }
            },
            agree: "required"
        },
        messages: {
            username: {
                required: "请输入用户名",
                minlength: "用户名必需由两个字母组成"
            },
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 6 个字母"
            },
            repassword: {
                required: "请输入密码",
                minlength: "密码长度不能小于 6 个字母",
                equalTo: "两次密码输入不一致"
            },
            email: "请输入一个正确的邮箱",
            zip:"请输入正确的邮政编码",
            code:"请输入正确的验证码",
            agree: "请接受我们的声明"

        },
        errorPlacement:function(error,element) {
            error.appendTo(element.parents('.form-group').find('.col-sm-3'));
        },
        submitHandler:function(form){
            alert("提交事件!");
            //$(form).ajaxSubmit();
            $.post('/login',$(form).formSerialize(),function(data){
                console.log(data);
            });
            return false;
        }
    });
    //    自定义验证
    jQuery.validator.addMethod("postcode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    });

</script>


</body>
</html>

YZiAngel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的表单插件

表单对各种程序员来说，并不陌生，我们总会在各种项目中接触到他，表单的布局样式及验证方法，总会耗费我们非常多的时间，为了节省时间和精力，现在我给大家推荐几个插件，只需要简单的调用，表单布局和验证将不再是问题，现在，我们先看一下：第一个插件bootstrap 链接地址：http://v3.bootcss.com/ 使布局更加简单第二个插件jQuery 链接地址：
复制链接

扫一扫

专栏目录