input的标签类型和表单验证

最新推荐文章于 2024-02-27 17:07:35 发布

转载最新推荐文章于 2024-02-27 17:07:35 发布 · 1k 阅读

文章标签：

#input标签 #表单验证

js 同时被 2 个专栏收录

1 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

本文介绍了HTML5中input标签的各种类型，包括date和url，并探讨了不同浏览器的支持情况。同时，通过使用jQuery Validate插件实现了表单的有效验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前就用过html5<input>标签的“tel”和“email”类型，在手机上点击“tel”链接可以直接打电话，感觉还比较方便。现在仔细看了下html5的input的标签输入类型，发现还是比较先进的。

在自己开发的小东西后台选择日期的功能用了date类型：

 
  
        <
        input
        type
        =
        "date"
        name
        =
        "date"
        />
       
 
 

发现Chrome和Opera支持都不错，IE11和Firefox30都不行，出不来日期选择窗口，希望各种浏览器能尽快完善对html5的支持，这样开发起来方便了。

另外，由于需要填写图片和地址的链接，用了url类型：

 
  
        <
        input
        type
        =
        "url"
        name
        =
        "siteurl"
        />
       
 
 

其他一些type可以参照 HTML5 新的 Input 类型
表单验证用了jQuery Validate，比较方便地完成了表单输入验证：

 
        <script type=
        "text/javascript"
        src=
        "js/jquery.validate.min.js"
        ></script>
       
        <script type=
        "text/javascript"
        >
       
        $(document).ready(
        function
        (){
       
        $(
        "#picture"
        ).change(
        function
        (){
       
        $(
        "#new-img"
        ).attr(
        "src"
        ,$(
        "#picture"
        ).val());
       
        });
       
        $(
        '#content-form'
        ).validate({
       
        rules: {
       
        title: {
       
        minlength: 2,
       
        required:
        true
       
        },
       
        date: {
       
        required:
        true
        ,
       
        required:
        true
       
        },
       
        picture: {
       
        minlength: 8,
       
        required:
        true
       
        },
       
        url: {
       
        minlength: 2,
       
        required:
        true
       
        }
       
        },
       
        highlight:
        function
        (element) {
       
        $(element).closest(
        '.form-group'
        ).removeClass(
        'has-success'
        ).addClass(
        'has-error'
        );
       
        },
       
        success:
        function
        (element) {
       
        element.text(
        'OK!'
        ).addClass(
        'valid'
        )
       
        .closest(
        '.form-group'
        ).removeClass(
        'has-error'
        ).addClass(
        'has-success'
        );
       
        }
       
        });
       
        });
       
        </script>

常规的如email、url、输入长度等的验证都可通过简单的参数设置完成。

下面是官方的示例和下载页面：

http://alittlecode.com/wp-content/uploads/jQuery-Validate-Demo/index.html

如果需要找表单验证插件的话，google一下，可选择的就多了。之前写过点简陋的基于jQuery的验证js：

 
  
        <script type=
        "text/javascript"
        >
       

        $(
        function
        (){
       

        //文本框失去焦点后
       

        $(
        'form :input'
        ).blur(
        function
        (){
       

        var
        $parent = $(
        this
        ).parent();
       

        $parent.find(
        ".formtips"
        ).remove();
       

        //验证用户名
       

        if
        ( $(
        this
        ).is(
        '#title'
        ) ){
       

        if
        (
        this
        .value==
        ""
        ){
       

        var
        errorMsg = 
        '标题不能为空.'
        ;
       

        $parent.append(
        '<span class="formtips onError input-notification error png_bg">'
        +errorMsg+
        '</span>'
        );
       

        }
        else
        {
       

        $parent.append(
        '<span class="formtips input-notification success png_bg"></span>'
        );
       

        }
       

        }
       

        //验证日期格式
       

        if
        ( $(
        this
        ).is(
        '#datepicker'
        )){
       

        if
        (
        this
        .value==
        ""
        ){
       

        var
        errorMsg = 
        '日期不能为空'
        ;
       

        $parent.append(
        '<span class="formtips onError input-notification error png_bg">'
        +errorMsg+
        '</span>'
        );
       

        }
        else
        if 
        (( 
        this
        .value!=
        ""
        && !/([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))/.test(
        this
        .value) ) ){
       

        var
        errorMsg = 
        '日期格式应该为XXXX-XX-XX.'
        ;
       

        $parent.append(
        '<span class="formtips onError input-notification error png_bg">'
        +errorMsg+
        '</span>'
        );
       

        }
        else
        {
       

        $parent.append(
        '<span class="formtips input-notification success png_bg"></span>'
        );
       

        }
       

        }
       

        }).keyup(
        function
        (){
       

        $(
        this
        ).triggerHandler(
        "blur"
        );
       

        }).focus(
        function
        (){
       

        $(
        this
        ).triggerHandler(
        "blur"
        );
       

        });
        //end blur
       

         
       

        //提交，最终验证。
       

        $(
        '#send'
        ).click(
        function
        (){
       

        $(
        "form :input.required"
        ).trigger(
        'blur'
        );
       

        var
        numError = $(
        'form .onError'
        ).length;
       

        if
        (numError){
       

        return
        false
        ;
       

        }
       

        });
       

        })
       

        </script>
       
 
 