介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
13个有用的HTML5、CSS3和jQuery搜索表单教程
添加搜素框或网站搜索功能是为了方便用户能够轻松、快捷地找到自己需要的信息。因此，在网站中添加一个搜索框已经成为网页设计的主流元素之一。添加一个搜索框到网站会使得用户界面更加友好，也能帮助用户轻松愉快地浏览。
下面，小编收集了13个有用的CSS3,HTML5和jQuery搜索表单脚本来帮助大家从头开始创建一个搜索框。希望能够帮助到大家，让我们一起来看看吧！
脉动的CSS3输入搜索框
输入搜索框带有边框和类似脉冲的阴影跳动。
纯CSS的建议搜索框
这是一个使用纯CSS构建扩展建议搜索框的简单教程。
CSS的扩大搜索框
扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框。
使用CSS转换扩大搜索栏
我们将利用CSS转换扩展了的搜索栏。搜索栏最初在视图中隐藏的，当点击搜索标签时它能顺利地扩展到视图。
在CSS客户端全文检索
使用指数化数据属性、动态样式和CSS3选择器的搜索功能，可以直接实现在CSS的全文检索，而不是JavaScript客户端。
用CSS3和HTML创建搜索框下拉菜单
在本教程中，我们将创建一个平面式的导航和Square UI的搜索下拉菜单。
如何编写一个扩展HTML5/ CSS3的搜索输入字段
在本教程中我们使用两种不同的方法来构建一个扩大搜索字段。
花式搜索框
这是一个奇特的搜索框，非常有意思！
搜索栏动画CriteriaSearchBox
一种提示选择搜索，像商店类别的搜索框。
jQuery和CSS3的\”下一步级别\”动画搜索表单基本的jQuery搜索/过滤器灵活的搜索框
一个灵活的搜索输入和内部固定宽度的提交按钮来固定边界的宽度。
本站文章除注明转载外，均为本站原创或翻译
django框架的表单form的理解和用法-9
表单呈现
在使用Django表单时，通常需要在HTML中呈现表单。为此，可以使用Django提供的一些内置标签和过滤器。
以下是一个基本的表单呈现示例：
在上面的代码中，我们首先使用{% csrf_token %}标签添加CSRF令牌以保护表单免受跨站点请求伪造攻击。然后，我们使用{{ form.as_p }}过滤器呈现整个表单，并将每个字段作为单独的段落呈现。最后，我们添加了一个提交按钮。
Django还提供了许多其他的表单呈现方式，例如使用as_table()或as_ul()过滤器将表单呈现为HTML表格或无序列表。您还可以使用自定义模板来完全控制表单的呈现方式。
表单处理
当用户提交表单时，表单数据将被发送到服务器并由Django视图函数处理。在处理表单之前，您可能需要执行一些验证或数据清理操作。这可以通过调用表单的is_valid()方法并检查其返回值来完成。
以下是一个处理表单的视图函数示例：
在上面的代码中，我们首先检查request.method是否为POST，如果是，则使用提交的数据创建一个新的表单实例。然后，我们调用form.is_valid()以验证表单，并获取清理后的数据字段（例如，使用form.cleaned_data[\’name\’]访问name字段）。最后，我们执行任何必要的业务逻辑并返回响应。
自定义表单字段
在某些情况下，您可能需要创建自定义表单字段来处理具有特殊要求的输入数据。这可以通过继承Django内置字段并添加自己的逻辑来完成。
以下是一个示例自定义表单字段：
在上面的代码中，我们首先创建了一个名为UsernameField的自定义表单字段，它继承自Django内置的CharField。然后，我们覆盖了to_python()方法以将输入值转换为小写，并在输入为空时返回一个空字符串。最后，我们覆盖了widget_attrs()方法以添加一个自动完成属性。
表单样式
在呈现表单时，通常需要对字段进行样式化，以使其看起来更漂亮和易于使用。有许多CSS框架和库可以用于此目的，例如Bootstrap和Foundation。
以下是一个使用Bootstrap样式的表单示例：
在上面的代码中，我们首先为表单添加了form类，并为每个表单字段创建了一个带有form-group类的包装器。然后，我们使用label_tag属性为每个字段添加标签，并使用默认的小部件呈现每个字段。
最后，我们添加了一个提交按钮，并使用btn和btn-primary类将其样式化为Bootstrap样式。这仅是一个示例，您可以根据需要自定义CSS类和样式。
Ajax表单提交
在某些情况下，您可能希望通过Ajax异步提交表单，而不是刷新整个页面。您可以使用jQuery或其他JavaScript库来执行此操作。
以下是一个使用jQuery提交表单的示例：
在上面的代码中，我们首先为表单添加了一个id属性以便在JavaScript中引用它。然后，我们使用jQuery的submit()方法在表单提交时阻止默认行为，并使用serialize()方法将表单数据转换为字符串。最后，我们使用$.ajax()函数向服务器发送异步POST请求，并在成功或错误时处理响应。
内联表单
有时，您可能需要将表单呈现为内联样式，以便更好地适应页面布局。这可以通过添加一些CSS样式来实现。
以下是一个基本的内联表单示例：
在上面的代码中，我们为表单添加了form-inline类，并使用form-group和label类调整字段和标签的样式。
多部分表单
有时，您可能需要创建包含文件上传等功能的多部分表单。Django的MultiValueDict类提供了一种处理此类表单数据的方法。
以下是一个基本的多部分表单示例：
在上面的代码中，我们首先检查request.method是否为POST，如果是，则使用request.FILES.getlist()获取提交的文件列表。然后，我们可以遍历文件列表并执行任何必要的业务逻辑。
在HTML中，您需要添加enctype=\”multipart/form-data\”属性以启用多部分表单上传：
在上面的代码中，我们添加了一个类型为file的输入字段，并将multiple属性设置为允许选择多个文件。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
