模仿 BootstrapValidator 自制 模块化 表单验证
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>BootstrapValidator</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap.min.css">
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#form-panel{
width: 40%;
padding: 30px;
border: 1px solid #bbb;
border-radius: 7px;
margin: auto;
margin-top: 10%;
}
#form-panel .form-control ~ p {
color: #c7254e;
}
</style>
</head>
<body>
<div id="form-panel">
<form id="html5Form" method="post" class="form-horizontal">
<!--
data-dv-xxxx
规则1：required=boolean required-message 必填项
规则2：regex=String regex-message 正则匹配失败
规则3：email=boolean email-message 邮箱验证失败
规则4：uri=boolean uri-message
age
greaterthan
lessthan
-->
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-7">
<input type="text" class="form-control" name="username"
data-dv-required="true"
data-dv-required-message="The username is required and cannot be empty"
data-dv-regex="^[a-zA-Z0-9]+$"
data-dv-regex-message="The username can only consist of alphabetical,number"
autocomplete="off" />
</div>
</div> <div class="form-group">
<label class="col-lg-3 control-label">Email</label>
<div class="col-lg-7">
<input class="form-control" name="email"
data-dv-required="true"
data-dv-required-message="The email is required and cannot be empty"
data-dv-email="true"
data-dv-email-message="The input is not a valid email address"
autocomplete="off" />
</div>
</div> <div class="form-group">
<label class="col-lg-3 control-label">Website</label>
<div class="col-lg-7">
<input class="form-control" name="website"
data-dv-required="true"
data-dv-required-message="The website is required and cannot be empty"
data-dv-uri="true"
data-dv-uri-message="The input is not a valid website address"
autocomplete="off" />
</div>
</div> <div class="form-group">
<label class="col-lg-3 control-label">Age</label>
<div class="col-lg-7">
<input type="text" class="form-control" name="age"
data-dv-required="true"
data-dv-required-message="The age is required and cannot be empty"
data-dv-greaterthan="10"
data-dv-greaterthan-message="The input must be greater than or equal to 10"
data-dv-lessthan="100"
data-dv-lessthan-message="The input must be less than 100"
data-dv-integer="true"
data-dv-integer-message="The input must be integer"
autocomplete="off" />
</div>
</div> <div class="form-group">
<div class="col-lg-12 text-center">
<input class="btn btn-primary" type="button" value="Regist" />
<input class="btn btn-primary" type="reset" value="Reset" />
</div>
</div>
</form>
</div> <script src="assets/jquery.min.js"></script></body>
<script src="bootstrap-dn-validator-1.11.0/js/bootstrap-dn-validator.js"></script>
<script>
// 1.json数据格式
// $(document).ready(function() {
// $('#html5Form').dnValidator({
// "username":"/^$/",
// "age":"/^$/"
// });
// }); $(document).ready(function() {
$('#html5Form').dnValidator({
trigger:"keyup"
});
});
</script>
</html>
bootstrap-dn-validator.js :
// bootstrap自定义插件有两种方式来实现参数配置
// 1.json数据格式
// 2.html attribute(属性)配置 // 1.创建闭包
(function(root,factory,plug){
// 4.创建闭包对象
return factory(root.jQuery,plug);
})(window,function($,plug){ // 3.传入 $ plug
// 9.默认参数 保证健壮性
var __DEFS__ = {
trigger:"change"
}; // 11.规则引擎
var __RULES__ = {
required:function(){
// console.log('required' + this.val());
return this.val()!=="";
},
regex:function(){
return new RegExp(this.data("dv-regex")).test(this.val());
},
email:function(){
return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.val());
},
uri:function(){
return /^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?$/.test(this.val());
},
// 扩展
integer:function(){
return /^[0-9]*[1-9][0-9]*$/.test(this.val());
},
greaterthan:function(){
return Number(this.val())>Number(this.data("dv-greaterthan"));
},
lessthan:function(){
return Number(this.val())<Number(this.data("dv-lessthan"));
}
} // 5.进行插件扩展 可以对jQuery进行重命名(通过创建作用,命令别名)
// 创建dnValidator插件
$.fn[plug] = function(options){ // 8.options 用户传参
// 10.继承
$.extend(this,__DEFS__,options);
// 6.找到表单中所有的input标签
var $fileds = this.find("input").not("[type=button],[type=reset],[type=submit]"); // 需要验证的表单域
// console.log($fileds.size()); // input个数
// 7.绑定事件
$fileds.on(this.trigger,function(){
var $field = $(this); // 被验证的目标对象
var result = true; // 14.验证结果,默认通过
$field.next().remove(); // 17.验证之前先把之前的错误信息移除掉
// 12.迭代rule
$.each(__RULES__,function(rule,valider){ // rule规则 valider验证器
// 13.判断目标对象被哪些规则验证
if($field.data("dv-"+rule)){
// 我需要验证rule这个规则
// console.log($field.attr("name") + "需要验证" + rule + "规则");
// 15.判断,只要有一个验证失败,就停止验证
result = valider.call($field); // true false call改变作用域
if(!result){ // 验证失败
// 16.显示提示信息
$field.after("<p>" + $field.data("dv-" + rule + "-message") + "</p>");
}
return result;
}
});
});
}
},"dnValidator")
// 2.匿名函数调用
// 参数1：window对象
// 参数2：function(){} 回调函数
// 参数3：插件名称
.
模仿 BootstrapValidator 自制 模块化 表单验证的更多相关文章
- Bootstrap学习总结笔记（24）-- 基于BootstrapValidator的Form表单验证
Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...
- bootstrapValidator.js 做表单验证
有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是b ...
- [转]bootstrapValidator.js 做表单验证
本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...
- 自制简单表单验证relative与absolute定位
html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- JS组件系列——Form表单验证神器： BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- jQuery封装的表单验证，模仿网易或者腾讯登录的风格
模仿网易邮箱做了一个登录表单验证,不太好,请指教 上代码 <form action="" name="" id="form1"> ...
随机推荐
- table 实现 九宫格布局
九宫格布局 最近遇到一个题目,是实现一个九宫格布局的.实现的效果大概是下图这种这样子的: (鼠标悬浮的时候,九宫格的边框颜色是改变的.) 首先想到的是直接使用<table>进行布局,原因很 ...
- [leetcode]Convert Sorted Array to Binary Search Tre
排好序的... 中间是root , root左边是left,root右边是right 递归建树. /** * Definition for binary tree * struct TreeNode ...
- Linux有名信号量的创建（sem_open中name参数构造）【转】
转自:http://blog.csdn.net/gfeng168/article/details/40740865 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.sem_open函数nam ...
- 软中断网卡处理&Linux高性能外部设备处理机制&SMP
转载:http://blog.csdn.net/freas_1990/article/details/9238183 看了一些linux网卡驱动的处理技术,对有些概念还是无法理解,突然搜到这篇文章,挺 ...
- 从linux看Android之一--init进程
准备环境: 熟悉linux环境和shell脚本 用SSHDROID和XShell搭建android的命令行环境(帮助找到熟悉的linux界面,因为android删除了很多标准linux平台上很多的sh ...
- 【Android开发日记】之入门篇（三）——Android目录结构
本来的话,这一章想要介绍的是Android的系统架构,毕竟有了这些知识的储备,再去看实际的项目时才会更清楚地理解为什么要这样设计,同时在开发中遇到难题,也可以凭借着对Android的了解,尽快找出哪些 ...
- C#中一些关键字和罕见类
1.@ 在处理字符串时,那些个字符串转义字符我们可以使用这个,那@就是为解决这个而诞生的,直接让字符串原样输出有木有?什么sql字符串了,还有路径啥了的,统统搞定 string sql = @&quo ...
- 推荐一本迷你中文书《JavaScript Promise迷你书（中文版）》
https://github.com/azu/promises-book http://it-ebooks24.com/ebook/mastering-javascript-promises 传值,调 ...
- 新疆大学ACM-ICPC程序设计竞赛五月月赛（同步赛）F 猴子排序的期望【Java/高精度/组合数学+概率论】
链接:https://www.nowcoder.com/acm/contest/116/F 来源:牛客网 题目描述 我们知道有一种神奇的排序方法叫做猴子排序,就是把待排序的数字写在卡片上,然后让猴子把 ...
- 51nod 1432 独木舟【贪心】
1432 独木舟 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两 ...