自定义jq插件：验证表单（基于Bootstrap）

最新推荐文章于 2020-06-11 19:55:39 发布

MiemieWan

最新推荐文章于 2020-06-11 19:55:39 发布

阅读量184

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/MiemieWan/article/details/100089692

版权

js基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		body {
			background-color: #eee;
		}
		form {
			width: 450px; 
			padding: 40px 20px;
			background-color: #fff;
			border: 1px solid #ddd;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
</head>
<body>
	<form id="my-form" class="form-horizontal" role="form">
	  <div class="form-group">
	    <label for="email" class="col-sm-2 control-label">Email</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="email" placeholder="请输入Email" data-bv-require="true" data-bv-require-error="* 邮箱地址为必填项" data-bv-email="true" data-bv-email-error="* 邮箱格式不正确">
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="password" class="col-sm-2 control-label">密码</label>
	    <div class="col-sm-10">
	      <input type="password" class="form-control" id="password" placeholder="请输入密码" data-bv-require="true" data-bv-require-error="* 密码为必填项" data-bv-regex="^\w{6,16}$" data-bv-regex-error="* 密码必须由6-16位数字或下划线组成">
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="card" class="col-sm-2 control-label">身份证</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="card" placeholder="请输入身份证" data-bv-require="true" data-bv-require-error="* 身份证为必填项" data-bv-card="true" data-bv-card-error="* 身份证校验失败">
	    </div>
	  </div>
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-default">登录</button>
	    </div>
	  </div>
	</form>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="form.js"></script>
<script>
	$('#my-form').bootstrapValidator({
		raise: 'keyup'
	}).extendRules({
		"card": function() {
			console.log('card');
			return /\d{6}(19|20)\d{2}[01]\d[0123]\d{4}[\dxX]/.test(this.val());
		}
	})

	
</script>
</body>
</html>

;(function(global, factory, validatorPlugin){
	return factory(global.jQuery, validatorPlugin);
}(this, function($, validator) {
	console.log($);
	// console.log(plugin);
	// 设置插件默认参数
	var __DFO__ = {
		raise: "change",
		errorMsg: '* 校验失败',
		extendRules: function(rules) {
			console.log('拓展规则');
			// 将拓展的规则插入规则行列
			$.extend(__RULES__, rules);
			console.log(__RULES__);
		}
	}
	var __RULES__ = {
		"require":function() {
			console.log(this);
			var val = this.val();
			// console.log(val);
			return (val != "") && (val != undefined) && (val != null);
		},
		"email":function() {
			return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.val());
		},
		"regex": function(regex) {
			return new RegExp(regex).test(this.val());
		}
	}
	// 将plugin插入jq,$.fn = jquery.prototype
	$.fn[validator] = function(options) {
		// this指向调用该插件的对象
		// 判断是否为form
		if(!this.is('form')) {
			throw new Error('type error [require form tag]')
		}
		// 在this中添加默认属性和开发者设置的属性
		$.extend(this, __DFO__, options);
		var that = this;

		// 获取部分input
		this.$fileds = this.find('input, textarea, select').not('input[type=submit],input[type=reset],input[type=button],input[type=image]');
		// input执行某事件监听
		this.$fileds.on(this.raise, function() {
			// console.log(this.value);
			// console.log(this);
			// console.log($(this));
			var $filed = $(this);
			var $group = $filed.parents('.form-group');//父元素
			$group.removeClass('has-success, has-error');
			$group.find('.help-block').remove();
			var config,error,__err__ = true;
			// 循环规则
			$.each(__RULES__, function(rule, valid) {
				config = $filed.data('bv-'+rule);
				console.log(rule);
				// config为data-bv-rule的属性值
				if(config) {
					console.log(config)
					__err__ = valid.call($filed, config);
					$group.addClass(__err__ ? 'has-success' : 'has-error')
					if(!__err__) {
						error = $filed.data('bv-' + rule + '-error') || that.errorMsg;
						$filed.after('<span class="help-block">' + error + '</span>');
					}
					// 返回true会继续进行each遍历，返回false则跳出遍历
					return __err__;
				}
			})
		})       
		console.log(this);   
		return this;
	}
}, "bootstrapValidator"));