jquery插件制作 -- 3.表单验证-阿里云开发者社区

开发者社区> bill.kang> 正文

jquery插件制作 -- 3.表单验证

简介:   今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范。   先下页面代码: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
+关注继续查看

  今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范。

  先下页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.formCheck.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.formToCheck').formCheck();
        });
    </script>
    <style type="text/css">
        form
        {
            width: 300px;
        }
        label
        {
            position: absolute;
        }
        input:not(.submit), textarea
        {
            margin-left: 100px;
            width: 200px;
        }
        .submit
        {
            margin-left: 100px;
        }
        .error
        {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <form class="formToCheck" id="formToCheck" method="get" action="#">
    <fieldset>
        <legend>a simple form</legend>
        <p>
            <label for="fname">
                * first name</label>
            <input id="fname" class="required" name="fname"  />
        </p>
        <p>
            <label for="lname">
                last name</label>
            <input id="lname" name="lname" />
        </p>
        <p>
            <label for="email">
                * email</label>
            <input id="email" name="email" class="required email" />
        </p>
        <p>
            <label for="comment">
                * comment</label>
            <input id="comment" name="comment" class="required" />
        </p>
        <p>
            <label for="email">
                * email</label>
            <input id="submit" type="submit" class="submit" value="submit" />
        </p>
    </fieldset>
    </form>
</body>
</html>

 

  我们定义了一个form,定义了几个输入框,请注意class属性,有的是class="required",说明该项是必填项;class="required email"说明该项是必填项,并且需要符合email格式。没有定义class的输入框不做验证。下面来看插件代码:

(function ($) {
    $.fn.formCheck = function (options) {
        var defaults = {
            errorClass: 'error'
        };
        var options = $.extend(defaults, options);

        return this.each(function () {
            var form = $(this);
            //如果不是from表单,直接返回不做任何操作
            if (!form.is('form')) {
                return;
            }
            //只有当form表单提交的时候,我们才做验证
            form.submit(function () {
                var errorFlag = false;

                //获取表单里面所有的input控件,逐一进行处理
                $(':input', this).each(function (index, item) {
                    //获取当前对象
                    var element = $(item);
                    //移除样式
                    element.removeClass(options.errorClass);

                    //必填项验证,value值不能为空
                    if (element.hasClass('required') && element.val().length == 0) {
                        errorFlag = true;
                        element.addClass(options.errorClass);
                    }
                    //数字验证
                    if (element.hasClass('number') && element.val().length > 0 && !/^\d+$/.test(element.val())) {
                        errorFlag = true;
                        element.addClass(options.errorClass);
                    }
                    //email验证
                    if (element.hasClass('email') && element.val().length > 0 
                && !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(element.val())) { errorFlag = true; element.addClass(options.errorClass); } //验证数字长度 var num = this.className.match(/min(\d+)/i); if (num && element.val().length < num[1]) { errorFlag = true; element.addClass(options.errorClass); } }); return !errorFlag; }); }); }; })(jQuery);

 

  demo下载地址:jQuery.plugin.formcheck.zip

  今天的课程就到此为止了。

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7842 0
EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证
  {                       field : 'startPort',                       title : "起始端口",                       editor: "text",                       width : 50,                       editor: {    
1809 0
8 个高可用的 jQuery 表单验证插件
1) A Jquery Inline Form Validation   2) Jquery Contact Form validation   3) Form Validation Using Jquery   4) Using Jquery and Aj...
545 0
JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载。今天来分享一下,关于这个插件的使用。 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照validation定义好的规则就可以了。
1042 0
12 个 jQuery 的表单验证教程和插件
jQuery Form Validation 使用jQuery进行快速简单的表单验证教程 Advanced jQuery form validation jQuery plugin: Validation A jQuery inline form validation Ad...
679 0
使用 纯JQuery 进行 表单 验证
对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表单验证。
787 0
jQuery 表单验证扩展(一)
好长一段时间没有写js代码了,也好长时间没有写文章了。今天刚申请一个2M 的电信宽带,下午闲来无事写了一个 基于jQuery的表单验证插件。首先申明这个插件问题比较多,不过觉得这个东西很有必要。后期持续跟新中,先把自己写的插件原型拿出来晒晒! 再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向。
814 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载