Bootstrap利用validate实现表单简单校验教程
77 浏览量
更新于2024-09-04
收藏 59KB PDF 举报
在Bootstrap中，利用jQuery Validate插件实现简单的表单校验功能是一项常见的需求。Bootstrap本身并未直接提供表单验证功能，但我们可以借助第三方库如jQuery Validate来增强其表单交互性。本文将详细介绍如何在HTML页面中集成jQuery Validate，并设置基本的表单验证规则。
首先，确保已包含必要的脚本文件。在head部分引入jQuery库，Bootstrap的JavaScript和CSS文件，以及jQuery Validate.min.js，以便实现表单验证功能：
```html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
</head>
```
接下来，在`<body>`部分创建一个简单的表单，包括用户名、密码和确认密码输入框：
```html
<body>
<form id="f1" method="post" action="">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" name="password" required min="6" max="16">
</div>
<div class="form-group">
<label for="repassword">确认密码:</label>
<input type="password" class="form-control" id="repassword" name="repassword" required>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$(function () {
// 使用jQuery Validate进行表单验证
$("#f1").validate({
rules: {
username: {
required: true
},
password: {
required: true,
rangelength: [6, 16] // 密码长度必须在6到16个字符之间
},
repassword: {
equalTo: "#password" // 确认密码必须与密码输入相同
}
},
messages: {
username: {
required: "请输入用户名"
},
password: {
required: "请输入密码",
rangelength: ["密码长度必须在6到16个字符"]
},
repassword: {
equalTo: "两次密码不同"
}
}
});
});
</script>
</body>
```
在这个例子中，我们使用`.validate()`方法初始化验证器，并定义了验证规则（如必填项、密码长度范围和密码匹配）。`required`属性用于强制填写字段，`rangelength`用于限制密码长度，`equalTo`则用于验证两个密码输入是否一致。`messages`对象用于定制错误提示信息，使用户更清楚地了解哪些输入不符合要求。
通过这种方式，Bootstrap与jQuery Validate结合，可以提升用户体验，确保用户在提交表单前填写完整并符合要求的数据。如果用户尝试提交无效数据，浏览器会显示相应的错误消息，帮助他们修正错误。
bootstrap使用使用validate实现简单校验功能实现简单校验功能
主要为大家详细介绍了bootstrap使用validate实现简单校验功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一
下
本文实例为大家分享了bootstrap validate校验功能，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!--导包-->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--校验-->
<script>
/* $(function(){
//校验
$("#f1").validate({
rules:{
username:{
required:true,
},
password:{
required:true,
rangelength:[6,16]
},
repassword:{
equalTo:$("input[name='password']")
}
},
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
rangelength:[6,16]
},
repassword:{
equalTo:"两次密码不同哦"
}
}
});
})*/
//自定义校验
$(function(){
$.validator.addMethod("check",function(param,ele,value){
//获取到ele的爷节点
var e=ele.parentNode.parentNode;
//先判断输入是否正确
if(param!=null && param.length<=16 &¶m.length>=6)
{
//当不为空,并且长度在6和16之间时代表输入正确,将颜色变为绿色的样式
//由于ele是JavaScript对象,所以如果要用jQuery的话需要包一下
// $(e).prop("class",$(e).prop("class")+" has-success");
// e.cclassName="form-group";
//将样式清空
$(e).prop("class","form-group");
//追加样式
e.className+=" has-success";
return true;
}else{
//js方法将样式清空
e.setAttribute("class","form-group");
// $(e).prop("class","form-group");
//错误了,修改样式
e.className+=" has-error";
//清空后还原样式
return false;
}
})
$("#f1").validate({
rules:{
下载后可阅读完整内容，剩余3页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
2023-05-29 上传
2023-05-20 上传
2023-04-03 上传
weixin_38744694
- 粉丝: 17
- 资源: 948
我的内容管理
展开
最新资源
- C++标准程序库：权威指南
- Java解惑：奇数判断误区与改进方法
- C++编程必读：20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程：从入门到精通
- Spring3.0权威指南：JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略：从环境配置到索引创建
- 内存虚拟硬盘技术：提升电脑速度的秘密武器
- Java操作数据库：保存与显示图片到数据库及页面
- ISO14001：2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发：触发器与控制器重定向技术详解
- FPGA开发实战指南：创新设计与进阶技巧
- ShopExV4.8二次开发入门：解决升级问题与功能扩展
