介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
一文读懂表单验证
表单验证概述
无论是动态网站，还是其他B/S结构的系统，都离不开表单。表单作为客户端向服务器端提交数据的主要载体，表单验证是避免提交的数据不合法的重要途径。
表单验证的必要性
表单验证可以放在客户端和服务器端，客户端验证实际是直接在已下载到本地的页面中调用脚本来进行验证，它不但能检查用户输入的无效或者错误数据，还能检查用户遗漏的必选项；而服务器端的验证则是将页面提交到服务器处理，服务器上的另一个包含表单的页面先执行对表单的验证，然后再返回相应结果到客户端，它的缺点是每一次验证都要经过服务器，不但消耗时间长，而且会大大增加服务器的负担。在客户端进行验证，能把服务器端的任务分给多个客户端去完成，从而减轻服务器端的压力，让服务器专门做其他更重要的事情。
基于以上原因，需要使用JavaScript在客户端对表单数据进行验证。接下来，就来具体了解表单验证的相关内容。
表单验证的内容
以常见的注册表单为例，表单验证的内容主要包括如下几种类型：
· 检查表单元素是否为空（如登录名不能为空）。
· 验证是否为数字（如出生日期中的年月日必须为数字）。
· 验证用户输入的电子邮箱地址是否有效（如电子邮箱地址中必须有“@”和“.”字符）。
· 检查用户输入的数据是否在某个范围之内（如出生日期的月份必须在1~12之间，日期必须在1~31之间）。
· 验证用户输入的信息长度是否足够（如输入的密码必须大于等于6个字符）。
实际上，在设计表单时，还会因情况不同而遇到其他很多不同的问题，这就需要我们自己去定义一些规定和限制。
表单验证的实现思路
表单验证的实现思路具体分析如下：
1. 获取表单元素的值，这些值一般都是String类型，包含数字、下划线等。
2. 根据业务规则，使用JavaScript中的一些方法对获取的数据进行判断。
3. 表单Form有一个事件onsubmit，它是在提交表单之前调用的，因此可以在提交表单时触发onsubmit事件，然后对获取的数据进行验证。
表单验证有两种方式：
· 简单的业务验证用String对象的属性和方法即可。
· 复杂的验证用正则表达式。
本任务只讲解使用String对象进行验证，后续任务讲解使用正则表达式进行验证。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
