有你在真好 的个人博客
介jquery.validate.js简单实用的表单验证框架
阅读:2044 添加日期:3/27/2021 11:31:15 PM 原文链接:https://www.toutiao.com/item/4725053392/

介jquery.validate.js简单实用的表单验证框架

最近在做用户登录、注册、以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了,根据自己需求进行了细节修改,重要是样式方面吧。

第一次发表这些,说得不好不要介意,开始吧。首先:

$("#form").validate({ 

 //在这里面编辑

});

验证的时候常常需要调试,该框架内置了一个方法,如下:

debug:true,   //调试模式(并不会提交)

来个实例,HTML:

<div class="form-group">

<label for="username">用户名:</label>

<input type="text" name="username" id="username" placeholder="请输入用户名" />

</div>

用rules方法进行设置验证,然后需求是:必填项,长度在3-10之间:

$(document).ready(function(){

$("#form").validate({

 debug:true, 

  //调试模式

 rules:{

 username:{

        required:true,

    //开启必填项rangelength:[3,10]

  //请输入的数值在3至10位之间

 }; 

        }; 

    });

});

我的理解是,获取 name值 和 type类型来验证的。来个重新输入密码吧:

html:

<div class="form-group">

<label for="confirm-password">确认密码:</label>

<input type="password" name="confirm-password" id="confirm-password" placeholder="请再次输入密码" />

</div>js:

password:{

 required:true,

 rangelength:[6,12]

},

"confirm-password":{

 equalTo:"#password"   //必须密码相同

}

如果想要自定义提示消息呢,那就用messages方法吧:

messages:{

 username:{required:"用户名不能留空", 

                       //用户名的必填项提示rangelength:"请检查您输入的数值的长度是否在2至10之间"  

//用户名的长度提示}

下面说说样式方面吧,输入框提示错误时,class类变成error;输入框正确时,class类变成valid,所以不同情况,加不同颜色边框:

.form-group input.error{

  border-color: #E74C3C; 

.form-group input.valid {

  border-color: #55D98D; 

}

提示的消息呢?输入框提示错误时,该便签会弹出,类名为error;输入框提示正确时,该便签会隐藏,并加了类名success,那么:

.form-group span.error{

   color: #E74C3C;

}

.form-group span.success{

  display: none;

}

其实还有很多方法的,如:groups、errorPlacement...基本能满足表单验证需求,演示那里有个demo,看看就明白啦。

文章内容请参见原文链接:
http://www.gbtags.com/gb/share/5749.htm