表单验证两种方式:

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的更多相关文章

  1. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  2. jQuery表单验证组件BootstrapValidator

    github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator ...

  3. 【前端_js】Bootstrap之表单验证

    Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程    

  4. JS组件系列——Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  6. 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. bootstrapValidator表单验证插件

    bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...

  8. Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  9. Bootstrap学习总结笔记(24)-- 基于BootstrapValidator的Form表单验证

    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...

随机推荐

  1. shell 进制转换

    包括: i.任意进制转化为十进制((num=base#number)) [base和number必须一致,是同一种进制] ii.十进制转化为任意进制`echo "obase=进制;值&quo ...

  2. ansible register基础使用讲解

    当我们需要判断对执行了某个操作或者某个命令后,如何做相应的响应处理(执行其他 ansible 语句),则一般会用到register . 举个例子: 我们需要判断 zip 包是否存在,如果存在了就执行一 ...

  3. oracle如何删除表空间

    drop tablespace 表空间名 including contents and datafiles cascade constraint; ............. 以system用户登录, ...

  4. 微信小程序---示例DEMO

    转:CSDN的文章: https://blog.csdn.net/rolan1993/article/details/73467867 不错的DEMO: https://github.com/skyv ...

  5. Zookeeper可以干什么

    在Zookeeper的官网上有这么一句话:ZooKeeper is a centralized service for maintaining configuration information, n ...

  6. ELK之收集tomcat访问日志

    把tomcat访问日志转换成json格式然后收集 修改配置文件conf/server.xml把日志输出改成json格式 添加logstash配置文件(日志按天切割可以使用*进行匹配所有)

  7. PAT天梯赛L2-004 这是二叉搜索树吗【递归】

    L2-004. 这是二叉搜索树吗? 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一棵二叉搜索树可被递归地定义为具有下列性质的 ...

  8. 新购买的vps应该做的几件事情

    1. 修改root密码      passwd   root 2.新建用户     useradd  vinentguo 3.配置免密码登陆 .使用新建用户登陆vps. mkdir ~/.ssh/ch ...

  9. HIVE表保存的路径

    HIVE表保存的默认路径在${HIVE_HOME}/conf/hive-site.xml配置文件的hive.metastore.warehouse.dir属性指定

  10. ConcurrentLinkedQueue

    我们要实现一个线程安全的队列有两种实现方式,阻塞算法.非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把锁) 或两个锁(入队和出队用不同的锁)等方式来实现,而非阻塞的实现方式则可以使用循环 ...