需求
基于jquery开发一个微量级验证插件，为表单验证提供功能，
1、可以让用户去配置选项，拥有定制validate插件的能力，如$('form').validate({defaultEvent:'change');
2、至少包含四种表单验证方式（身份证号码验证、手机号码、电子邮箱验证、必填字段验证、最大值/最小值验证）
编码
效果图
(function(root,pluginName){
//校验规则，微引擎
var RULES = {
idcard: function () {
var inputVal = this.val();
var regex = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
return regex.test(inputVal);
},
tel: function () {
var inputVal = this.val();
var regex = /1\d{10}/;
return regex.test(inputVal);
},
email: function () {
var inputVal = this.val();
var regex = /\w+@\w+\.\w+/;
return regex.test(inputVal);
},
};
$.fn[pluginName] = function(options){
if(!this.is('form')){
return;
}
var defaultOptions = {
triggerEvent:'change',
sign:'dv',
error:'输入不合法，请检查输入数据'
};
$.extend(defaultOptions,options);
var inputEls = this.find('input');
inputEls.on(defaultOptions.triggerEvent,function(event){
var value = this.value;
var $ele = $(this);
$ele.next('span').remove();
$.each(RULES,function(key,func){
var value = $ele.data(defaultOptions.sign+'-'+key);
if(value){
var result = func.call($ele);
if(!result){
var errorMsg = $ele.data(defaultOptions.sign + '-' + key + "-error") || defaultOptions.error;
$ele.after('<span style="color:red;">'+errorMsg+'</span>');
}
}
});
console.log(value);
});
};
$.fn[pluginName]['expand'] = function(options){
$.extend(RULES,options);
}
})(this,'validate');
新建一个表单页面测试，validate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<form>
<div class="form-group">
<label for="idCard">身份证号码</label>
<input type="text" class="form-control" id="idCard" placeholder="Enter ID Card" data-dv-idcard=true data-dv-email-error="请输入合法的邮箱信息">
</div>
<div class="form-group">
<label for="tel">手机号码</label>
<input type="text" class="form-control" id="tel" placeholder="Enter Tel" data-dv-tel=true>
</div>
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" data-dv-email=true>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script src="../jquery-3.4.0.js"></script>
<script src="jquery.validate.js"></script>
<script>
$('form').validate({
});
/**弹性扩展**/
$.fn.validate.expand({
password:function(){
var regex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
var val = $(this).val();
return regex.test(val);
}
});
</script>
</body>
</html>
