jQuery表单校验jquery.validate.js的使用

jQuery是一个快速、简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互。使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。

jquery.validate.js是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法

1.jquery包的引入:

   引入jquery包:<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src="/common/js/jquery/jquery.js'"></script>

2.添加校验说明:

主要使用的是javascript编写的验证库——jQuery.Validate,这个验证库是属于jQuery的插件。

引入:

<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src="/common/js/jquery/jquery.validate.pack.js"></script>

jQuery.Validate是监控form的,在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则,满足才允许提交。所以需要在jQuery(document).ready()时为form进行验证注册,格式: $(“#formid”).validate(jsonobj)。

其中formid是文件中form表单的id,jsonobj包含两个属性:rules和messages,rules用来指明每个字段上添加的校验规则,messages用来说明相应的校验出错时对应的提示语。

messages为非必须,如果自己不定义该属性,会采用默认的提示。

例如/test/validate/formvalidate.jsp:

<html xmlns=https://www.linuxidc.com/Linux/2011-10/"http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv=https://www.linuxidc.com/Linux/2011-10/"Content-Type" content=https://www.linuxidc.com/Linux/2011-10/"text/html; charset=ISO-8859-1" />

<title>表单校验</title>

<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src=https://www.linuxidc.com/Linux/2011-10/"/common/jquery.js"></script>

<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src=https://www.linuxidc.com/Linux/2011-10/"/common/jquery.validate.pack.js"></script>

<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src=https://www.linuxidc.com/Linux/2011-10/"/common/jquery.form.js"></script>

</head>

<body>

    <form id=https://www.linuxidc.com/Linux/2011-10/"test">

        <input name=https://www.linuxidc.com/Linux/2011-10/"nameput" type=https://www.linuxidc.com/Linux/2011-10/"text" size=https://www.linuxidc.com/Linux/2011-10/"20"/>

        <input name=https://www.linuxidc.com/Linux/2011-10/"submit" type=https://www.linuxidc.com/Linux/2011-10/"submit" value=https://www.linuxidc.com/Linux/2011-10/"提交"/>

    </form>

    <script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript">

        $("#test").validate({

            rules:{

                "nameput":{

                    required:true,

                    minlength:3,

                    maxlength:10

                }  

            },

            messages:{

                "nameput":{

                    required:"不能为空",

                    minlength:jQuery.format("长度不小于{0}"),

                    maxlength:jQuery.format("长度不大于{0}")

                }

            }

        })

    </script>

</body>

</html>

注意:nameput是input标签的name。

Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。

3.自定义验证方式

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwwpd.html