js中的表单插件

来源：互联网发布：北京电脑数据恢复公司编辑：程序博客网时间：2024/06/03 10:59

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

第一个插件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>

0 0