下面就是jquery表单验证插件formValidator的使用方法攻略。
什么是jquery表单验证插件formValidator？
jquery表单验证插件formValidator是一款基于jQuery的表单验证插件，可快速实现表单的输入验证功能，让表单验证变得简单易用。
如何使用jquery表单验证插件formValidator？
- 首先，在页面中引入jQuery库和formValidator插件库。
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/form-validator/2.3.26/form-validator/jquery.form-validator.min.js"></script>
- 然后，在表单元素中加入对应的验证规则和提示信息。
<form>
<input type="text" name="username" data-validation="length alphanumeric" data-validation-length="min4" data-validation-error-msg="用户名必须由至少4个字母或数字组成。" />
<input type="password" name="password" data-validation="strength" data-validation-strength="2" data-validation-error-msg="密码必须由至少6位字符的字母和数字组成。" />
<button type="submit">提交</button>
</form>
在上面的表单中，我们通过在表单元素上设置data-validation属性和相关的data-validation-*属性，来指定表单元素需要验证哪些内容以及相关的提示信息。
- 最后，在页面加载完毕后，使用formValidator方法来启用表单验证功能。
$(document).ready(function(){
$.validate();
});
通过以上步骤，就可以轻松地使用jquery表单验证插件formValidator了。
两条示例说明
示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用formValidator插件验证表单</title>
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/form-validator/2.3.26/form-validator/jquery.form-validator.min.js"></script>
</head>
<body>
<form>
<label>用户名：</label><input type="text" name="username" data-validation="length alphanumeric" data-validation-length="min4" data-validation-error-msg="用户名必须由至少4个字母或数字组成。" /><br/>
<label>密码：</label><input type="password" name="password" data-validation="strength" data-validation-strength="2" data-validation-error-msg="密码必须由至少6位字符的字母和数字组成。" /><br/>
<label>确认密码：</label><input type="password" name="confirm-password" data-validation="confirmation" data-validation-confirm="password" data-validation-error-msg="两次输入的密码必须一致。" /><br/>
<label>邮箱：</label><input type="text" name="email" data-validation="email" data-validation-error-msg="请输入正确的邮箱地址。" /><br/>
<label>年龄：</label><input type="number" name="age" data-validation="number" data-validation-error-msg="请输入整数数字。" /><br/>
<button type="submit">提交</button>
</form>
<script>
$(document).ready(function(){
$.validate();
});
</script>
</body>
</html>
以上示例演示了如何使用formValidator插件对一个包含多个表单元素的表单进行验证。其中，用户名必须由至少4个字母或数字组成，密码必须由至少6位字符的字母和数字组成，确认密码必须与密码相同，邮箱必须符合邮箱地址格式，年龄必须为整数数字。如果用户在表单中输入的值不符合以上要求，就会在输入框下方显示对应的提示信息。
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用formValidator插件验证表单</title>
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/form-validator/2.3.26/form-validator/jquery.form-validator.min.js"></script>
</head>
<body>
<form>
<label>用户名：</label><input type="text" name="username" data-validation="length alphanumeric" data-validation-length="min4" data-validation-error-msg="用户名必须由至少4个字母或数字组成。" /><br/>
<label>密码：</label><input type="password" name="password" data-validation="strength" data-validation-strength="2" data-validation-error-msg="密码必须由至少6位字符的字母和数字组成。" /><br/>
<button type="submit">提交</button>
</form>
<script>
$(document).ready(function(){
$.validate({
modules: 'security',
onModulesLoaded: function(){
var optionalConfig = {
fontSize: '12pt',
padding: '4px',
backgroundColor: '#fff',
color: '#000',
borderRadius: '4px'
};
$('input[name="password"]').displayPasswordStrength(optionalConfig);
}
});
});
</script>
</body>
</html>
以上示例演示了如何使用formValidator插件配合security模块和displayPasswordStrength方法来检查密码的安全性，并在密码输入框下方显示密码强度。在该示例中，密码必须由至少6位字符的字母和数字组成，并且必须具有一定的安全性。如果密码越强，那么提示信息下方显示的颜色和文本越醒目。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery表单验证插件formValidator使用方法 - Python技术站
微信扫一扫 
支付宝扫一扫 