Only to learn the code, the main places to write a comment, please write well bigwigs point out, thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title>微量级验证插件</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
.form-validate {
width: 800px;
margin: 50px auto 0;
}
label {
display: inline-block;
max-width: 100%;
margin-top: 7px;
margin-bottom: 5px;
font-weight: 700;
}
.formInput {
width: 100%;
height: 32px;
padding: 6px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #fff;
}
.btn:hover {
color: #333;
text-decoration: none;
background-color: #e6e6e6;
border-color: #8c8c8c;
}
.form-group {
margin-bottom: 15px;
}
.color {
color: #f00;
}
</style>
</head>
<body>
<form class="form-validate">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="formInput" id="username" name="username" data-fv-required="true" data-fv-required-message="用户名不能为空"
data-fv-regex="^[_0-9a-z]{6,16}$" data-fv-regex-message="用户名由6-16位的字母数字下划线组成" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="email">验证邮箱</label>
<input type="text" class="formInput" id="email" name="email" data-fv-required="true" data-fv-required-message="邮箱不能为空"
data-fv-email="^\w+@\w+\.\w+$" data-fv-email-message=" 邮箱输入不合法" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="password">输入密码</label>
<input type="password" class="formInput" id="password" name="password" data-fv-require="true" data-fv-require-message="密码必须填写" data-fv-regex="^[0-9a-zA-Z]+$"
data-fv-regex-message="密码格式由字母数字组成" data-fv-match="#confirmPassword" data-fv-match-message="密码和确认密码不一致" data-fv-maxlength="16"
data-fv-maxlength-message="密码不能超过16位" data-fv-minlength="6" data-fv-minlength-message="密码不能小于6位" id="password" placeholder="请输入数组字母下划线">
</div>
<div class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" class="formInput" name="confirmPassword" data-fv-require="true" data-fv-require-message="确认密码必须填写"
data-fv-regex="^[0-9a-zA-Z]+$" data-fv-regex-message="密码格式由字母数字组成" data-fv-match="#password" data-fv-match-message="确认密码和密码不一致"
data-fv-maxlength="16" data-fv-maxlength-message="密码不能超过16位" data-fv-minlength="6" data-fv-minlength-message="密码不能小于6位"
id="confirmPassword" placeholder="请输入数组字母下划线">
</div>
<div class="form-group">
<label for="phone">手机号码</label>
<input type="text" class="formInput" id="phone" name="phone" data-fv-required=true data-fv-required-message="手机号码不能为空"
data-fv-phone="^1\d{10}$" data-fv-phone-message=" 手机号码输入不合法" placeholder="请输入合法的电话号码">
</div>
<input type="button" class="btn btn-default" data-fv-submit="true" value="注册">
</form>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
(function() {
var factory = function(jquery,fn) {
// 配置默认参数模块
var formDefault = {
defaultEvent:"change"
}
// 正则验证模块
var formExp = {
required : function() {
return this.val() != "";
},
// 自定义
regex : function() {
return new RegExp(this.data("fv-regex")).test(this.val());
},
email : function() {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.val());
},
phone : function() {
return /^(0\d{2,3}-?\d{7,8}|1[3|4|5|7|8][0-9]{9})$/.test(this.val());
},
// 比较输入两次是否一致
match : function() {
var $t = $(this.data("fv-match"));
if($t.val()) {
var res = $t.val() === this.val();
if(res){
$t.next().remove();
}
return res;
} else {
return true;
}
},
maxlength : function() {
return this.val().length <= Number(this.data("fv-maxlength"));
},
minlength : function() {
return this.val().length >= Number(this.data("fv-minlength"));
}
}
// 提交验证模块
var checkSubmit = {
formSubmit : function() {
// 错误提示的个数
var errors = this.$all.trigger(this.defaultEvent).next("p").length;
if(errors === 0) {
// 验证成功
alert('提交');
}
}
};
$.fn[fn] = function(options) {
var $this = this;
// 添加模块
$.extend(this, formDefault, options, checkSubmit);
// 删选需要提示的元素
this.$all = this.find("input,select,textarea").not("[type=button],[type=reset],[type=submit]");
// 绑定事件
this.$all.on(this.defaultEvent, function(){
var $own = $(this);
// 遍历把之前还有的提示去除
$own.next("p").remove();
var result = true;
var message = "";
$.each(formExp, function(rule, validater){
if($own.data("fv-" + rule)){
result = validater.call($own);
if(!result) {
message = $own.data("fv-" + rule + "-message");
}
return result;
}
});
!result && $own.after("<p class='color'>" + message + "</p>");
});
// 绑定提交事件
this.find("[data-fv-submit=true]").on("click",function(){
$this.formSubmit();
})
}
}
factory(window.jQuery,'validate');
}());
</script>
<script>
$(".form-validate").validate({
defaultEvent: "keyup"
});
</script>
</body>
</html>
