Bootstrap框架是什么,如何用Bootstrap框架实现表单验证?
发布网友
发布时间：2022-04-23 05:24
共1个回答
热心网友
时间：2022-04-06 15:01
采用bootstrap框架来实现表单验证的优势有以下两点：
一、它使用起来很方便。
二、非常便于阅读，使代码更容易理解。
下面我们通过一个使用Bootstrap框架的表单验证示例来说明具体是如何实现的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Forms: Bootstrap Validation Mole</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
input:valid {
background: #fff;
}
input:invalid {
background: #fcc;
color: #333;
}
</style>
</head>
<body>
<article>
<h1>Forms<span> - bootstrap 验证 模块</span></h1>
</article>
<div id="result-stub" class="well hidden">
//设置好Input元素要满足的验证条件
<form id="email-form">
<input type="text"
id="username" name="username"
pattern="[a-zA-Z ]{5,}"
placeholder="用户名"
maxlength="30"
required
data-role="validate"
title="用户名"
data-content="用户名是必填的，支持一连串字母和数字组合" /><br />
<input type="email"
id="email" name="email"
data-role="validate"
placeholder="Email" required
title="Email"
data-content="email地址为必填." /><br />
<button type="button"
class="btn"
data-role="trigger-validation">验证</button>
</form>
<div id="msg"></div>
</div>
<script >
window.onload = function() {
//ValidationUtility函数主要是封装表单验证的逻辑，用来处理表单验证。
var ValidationUtility = function() {
var
elements = $('[data-role="validate"]'),//获取需要验证的元素对象
elementCount = 0;//。它来控制对话框的显示个数
//Popover是Bootstrap的弹出提示控件，这个提示控件并不会直接显示出来。它需要调用特定的方法才会显示出来。
elements.popover({
placement: 'top'
});
//这里通过jQuery的on方法来设置验证失败处理事件，这里传入参数invalid，它表示验证失败事件。
//当验证失败且elementCoun变量为0时，该函数就会通过id选择器选择验证失败的input元素对象调用popover（show）方法，通过该方法设置提示信息对话框为显示状态。然后通过elementCount++来使变量elementCount自增加数值1. 所以当两个input元素都验证失败时，只会显示第一个input元素验证失败的提示信息。
elements.on('invalid', function() {
if (elementCount === 0) {
$('#' + this.id).popover('show');
elementCount++;
}
});
//输入框失去焦点时隐藏提示控件
elements.on('blur', function() {
$(this).popover('hide');
});
//validate函数，该函数功能是使表单进行表单验证。当这个函数被调用时，elementCount变量会被重新赋值为0。
var validate = function(formSelector) {
elementCount = 0;
//给传入的表单参数前面加上#，使其变成ID选择器
if (formSelector.indexOf('#') === -1) {
formSelector = '#' + formSelector;
}
//对表单进行验证并返回结果
return $(formSelector)[0 ].checkValidity();
};
//ValidationUtility 函数是采用的Revealing Mole 的JavaScript设计模式，在函数的最底部我们可以看到它有一个公共函数validate供外部访问。
return {
validate: validate
};
};
//获取验证按钮和ValidationUtility函数对象
var
validator = new ValidationUtility(),
selector = '[data-role="trigger-validation"]';
//为验证按钮绑定点击事件
$(selector).click(function() {
if (validator.validate('email-form')) {
$('#msg').text('验证通过');
}
else {
$('#msg').text('验证未通过');
}
});
//---
}
</script>
<script data-main="../js/main" src="../js/jquery.js"></script>
<script data-main="../js/main" src="../js/bootstrap.js"></script>
</body>
</body>
</html>
这些都是HTML5中新加入的一些新特性的使用方法。推荐你去教程网站秒秒学上把相关的基础知识夯实下，希望对你有帮助。
