如何validate插件进行表单验证?

知识共享许可协议 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

前提:

          validate插件是在Jquery的基础上写的,如果要想成功的调用插件的规则,首先要引入:(插件的下载链接,直接关联到我的csdn)

            

使用的的格式:(必须要按照这种格式书写,否则将会无法使用)
 

表单jQuery对象.validate({
            rules:{
                表单元素name值1:"规则1",
                表单元素name值2:{
                    规则名称:规则值,
                    规则名称:规则值,
                }
            },
            messages:{
                表单元素name值1:"提示1",
                表单元素name值2:{
                   规则名称:"提示2_1",
                   规则名称:"提示2_2",
                }
            }
         })

常见规则:

小案例:

核心代码,注意别忘记的引用。

<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
$(function(){
            $("#myform").validate({
                rules:{
                    username:"required",
                    password:{
                        required:true,
                        minlength:8,
                        maxlength:16
                    }
                },
                messages:{
                    username:"用户名必填",
                    password:{
                        required:"密码不能为空",
                        minlength:"密码的最小长度是8",
                        maxlength:"密码的最长长度是16"
                    }
                }
            })
        })

html代码:

<form name="myform" id="myform" method="post" action="test.html">
    用户名<input type="text" name="username"/><br/>
    密码<input type="text" name="password"/><br/>
    <input type="submit"/>
</form>

注意事项:插件引用是调取name的名字,进行调用的。

猜你喜欢

转载自blog.csdn.net/longyanchen/article/details/93380166