表单验证——JqueryValidator、BootstrapValidator
表单验证两种方式：
1、JqueryValidator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JqueryValidator实战——用户注册</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> </head>
<body>
<form id="signUpForm">
<label for="username">username:</label>
<br>
<input type="text" id="username" name="username">
<br>
<label for="password">password:</label>
<br>
<input type="password" id="password" name="password">
<br>
<label for="confirmPassword">confirm:</label>
<br>
<input type="password" id="confirmPassword" name="confirmPassword">
<br>
<input type="submit" value="Submit" class="submit">
</form>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function(){
$("#signUpForm").validate({
debug:true,
rules:{
username:"required",
password:{
required: true,
minlength: 5
},
confirmPassword: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages:{
username:"用户名"
}
});
}); </script>
</body>
</html>
2、BootstrapValidator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BootstrapValidator表单验证Test</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/bootstrapValidator/dist/css/bootstrapValidator.min.css"/> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bower_components/bootstrapValidator/dist/js/bootstrapValidator.min.js"></script>
</head>
<body>
<form class="registerForm col-xs-5">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" name="email" />
</div>
<input type="submit" value="Submit" class="submit">
</form> <script>
$(document).ready(function() {
$('.registerForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
</script>
</body>
</html>
几点区别：
1、BootstrapValidator因为使用到了bootstrap定义的样式，美观程度上略胜一筹；
2、BootstrapValidator默认支持正则表达式，可根据业务逻辑设计自定义的正则表达式，而jqueryValidator默认不支持正则，需要手动添加addMethod("regex",xxx);见http://stackoverflow.com/questions/280759/jquery-validate-how-to-add-a-rule-for-regular-expression-validation
3、其他方面，如添加验证规则的语法上，两者基本一样，可以在html中设置属性，也可以在js中设置。
表单验证——JqueryValidator、BootstrapValidator的更多相关文章
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- jQuery表单验证组件BootstrapValidator
github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator ...
- 【前端_js】Bootstrap之表单验证
Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程
- JS组件系列——Form表单验证神器： BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrapValidator表单验证插件
bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...
- Form表单验证神器： BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- Bootstrap学习总结笔记（24）-- 基于BootstrapValidator的Form表单验证
Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...
随机推荐
- iOS property中的strong 、weak、copy 、assign 、retain 、unsafe_unretained 与autoreleasing区别和作用详解
iOS5中加入了新知识,就是ARC,其实我并不是很喜欢它,因为习惯了自己管理内存.但是学习还是很有必要的. 在iOS开发过程中,属性的定义往往与retain, assign, copy有关,我想大家都 ...
- Elasticsearch 索引、更新、删除文档
一.Elasticsearch 索引(新建)一个文档的命令: curl XPUT ' http://localhost:9200/test_es_order_index/test_es_order_t ...
- flex常用快捷键
先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...
- js 的基础知识
一.弱类型意识 js变量是没有类型的 var a = 1; //a 就是一个变量 不要提什么类型 变量可以赋任何类型的值 类型仅仅是值的性质 与变量无关 Js的基本类型 变量未赋值时,其值为und ...
- 2018-2019-2 20165330《网络对抗技术》Exp6 信息搜集与漏洞扫描
目录 基础问题 相关知识 实验目的 实验内容 实验步骤 实验总结与体会 实验目的 掌握信息搜集的最基础技能与常用工具的使用方法. 返回目录 实验内容 各种搜索技巧的应用 使用搜索引擎 搜索网址目录结构 ...
- hihocoder 1829 - 压缩字符串 - [状压+暴力枚举][2018ICPC北京网络预赛B题]
题目链接:https://hihocoder.com/problemset/problem/1829 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Lara Croft, ...
- ESXI虚拟机磁盘管理（精简-厚置-精简）
VMwareESX/ESXi 精简置备(thin)与厚置备(thick)虚拟机磁盘之间转换 VMwareESX/ESXi 虚拟机磁盘thin与thick之间转换 注意:转换前请先关闭虚拟机!!! 一. ...
- Oracle安装部署之linux(redhat/centos)快速安装oracle 11g rac
安装oracle 11gR2 RAC 一.网络规划及安装虚拟主机 主机名 主机版本 Ip rac1.localdomain Redhat 6.5 RAC节点1 192.168.100.11 rac2. ...
- @font-face 字体图标的应用
所谓字体图标,顾名思义就是图标以字体的形式存在,可以利用 font-size.color 对字体图标的大小和颜色进行渲染.将小图标集中放到字体库里,利用css3 @font-face 引用图标,不仅有 ...
- 编译x11版本qt
用buildroot 选择x11相关 在选择qt x11版本 export PATH=~/buildroot/output/host/usr/bin:$PATH 进入~/buildroot/out ...