下面将详细讲解 Bootstrap 表单验证 formValidation 实现表单动态验证功能的完整攻略。
什么是 Bootstrap 表单验证 formValidation
Bootstrap表单验证formValidation是一种基于jQuery的验证表单的插件。它是一个简单易用、灵活性强的工具，可以帮助开发者实现表单的动态验证功能。
formValidation可以对输入内容进行自定义验证，比如验证输入数据的长度、格式、是否符合正则表达式等，同时还可支持异步验证。
步骤
下面是利用Bootstrap 表单验证 formValidation实现表单动态验证功能的步骤：
- 在 HTML 文件中添加表单并引入Bootstrap表单验证formValidation的必要文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 表单验证 formValidation 实现表单动态验证功能</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/formvalidation/0.6.1/css/formValidation.min.css">
</head>
<body>
<div class="container">
<form id="myForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label" for="firstName">First name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Enter your first name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="lastName">Last name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Enter your last name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="email">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email address">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="Confirm your password">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="submit" class="btn btn-primary btn-block">Sign up</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdn.staticfile.org/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</body>
</html>
- 给表单添加自定义验证
<form id="myForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label" for="firstName">First name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Enter your first name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="lastName">Last name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Enter your last name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="email">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email address">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="Confirm your password">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="submit" class="btn btn-primary btn-block">Sign up</button>
</div>
</div>
</form>
<script>
$('#myForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
},
stringLength: {
min: 2,
max: 30,
message: 'The first name must be more than 2 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/i,
message: 'The first name can only consist of alphabetical characters and spaces'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
},
stringLength: {
min: 2,
max: 30,
message: 'The last name must be more than 2 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/i,
message: 'The last name can only consist of alphabetical characters and spaces'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
stringLength: {
min: 6,
message: 'The password must have at least 6 characters'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and confirm password is not the same'
}
}
}
}
});
</script>
以上代码演示了自定义验证规则。它主要包括指定元素 fields 以及验证器 validators。通过设置不同的验证器，你可以很容易地自定义表单的验证规则。
- 进行提交
当用户单击"Sign Up"按钮提交表单时，自动执行表单的验证程序，验证表单的输入合法性。
完整的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 表单验证 formValidation 实现表单动态验证功能</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/formvalidation/0.6.1/css/formValidation.min.css">
</head>
<body>
<div class="container">
<form id="myForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label" for="firstName">First name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Enter your first name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="lastName">Last name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Enter your last name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="email">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email address">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="Confirm your password">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="submit" class="btn btn-primary btn-block">Sign up</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdn.staticfile.org/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
},
stringLength: {
min: 2,
max: 30,
message: 'The first name must be more than 2 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/i,
message: 'The first name can only consist of alphabetical characters and spaces'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
},
stringLength: {
min: 2,
max: 30,
message: 'The last name must be more than 2 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/i,
message: 'The last name can only consist of alphabetical characters and spaces'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
stringLength: {
min: 6,
message: 'The password must have at least 6 characters'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and confirm password is not the same'
}
}
}
}
});
});
</script>
</body>
</html>
示例
以下是两个用于表单验证的示例：
示例1: 对输入数据的长度限制进行验证
<div class="form-group">
<label class="col-md-3 control-label" for="firstName">First name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Enter your first name">
</div>
</div>
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
},
stringLength: {
min: 2,
max: 30,
message: 'The first name must be more than 2 and less than 30 characters long'
}
}
}
在这个示例中，我们通过设置 min 和 max 属性，限制用户输入的 firstName 长度必须小于等于 30 个字符，大于等于 2 个字符。
示例2：对输入数据的格式限制进行验证
<div class="form-group">
<label class="col-md-3 control-label" for="email">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email address">
</div>
</div>
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
在这个示例中，我们通过设置 emailAddress 验证器来验证 email 的输入格式是否合法，不合法的话，给出一个提示信息： 'The input is not a valid email address'。
这个示例还展示了如何在验证器中指定出现错误时给出相应的提示信息。
结束语
至此，你应该已经学会了如何使用 Bootstrap 表单验证 formValidation 来实现表单的动态验证功能。希望你能够在实际开发中运用这些技术，为用户提供更加友好、便捷的应用程序。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap 表单验证formValidation 实现表单动态验证功能 - Python技术站
微信扫一扫 
支付宝扫一扫 