jquery表单注册验证框架js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery表单注册验证框架js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/kit.js"></script>
		<!--[if IE]>
		<script src="js/ieFix.js"></script>
		<![endif]-->
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-30210234-1']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();

		</script>
		<script src="js/dom.js"></script>
		<script src="js/form.js"></script>
		<link rel="stylesheet" href="css/css.css" />
		<link rel="stylesheet" href="css/login.css" />
		<link rel="stylesheet" href="css/validator.css" />
		<!--validator-->
		<script src="js/validator.js"></script>
		<script src="js/autowired.validator.js"></script>
		<style>
			table td {
				font-size: 14px;
			}
			label {
				cursor: pointer;
				margin-right: 1em;
			}
		</style>
	</head>
	<body>
		<h1>jquery表单注册验证框架</h1>
		<div id="regist-main">
			<form id="registForm" action="/Account/Register" method="post" onsubmit="alert('验证通过，可以提交！');return false;">
				<ol>
					<li>
						<label for="UserName">用户名：
						<span class="kitjs-validator" for="@UserName" rules="[{notNull:true, message:'用户名不能为空'}]"></span>
						</label>
						<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
						<input id="UserName" name="UserName" type="text" value="">
					</li>
					<li>
						<label for="Email">电子邮件：
						<span class="kitjs-validator" for="@Email" rules="[{notNull:true, message:'电子邮件不能为空'},{isEmail:true,message:'电子邮件格式不正确'}]"></span>
						</label>
						<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
						<input id="Email" name="Email" type="text" value="">
					</li>
					<li>
						<label for="Password">密码：
						<span class="kitjs-validator" for="@Password" rules="[{notNull:true, message:'密码不能为空'},{minLength:'6',message:'密码长度最少为6位'}]"></span>
						</label>
						<span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
						<input id="Password" name="Password" type="password">
					</li>
					<li>
						<label for="ConfirmPassword">重新输入密码：
						<span class="kitjs-validator" for="@ConfirmPassword" rules="[{notNull:true, message:'重新输入密码不能为空'},{equalWith:'@Password',message:'两次输入密码必须一致'},{minLength:'6',message:'密码长度最少为6位'}]"></span>
						</label>
						<span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
						<input id="ConfirmPassword" name="ConfirmPassword" type="password">
					</li>
				</ol>
				<div class="registError"></div>
				<input type="submit" value="注册" class="btn-submit">
			</form>
		</div>
	</body>
</html>

JS代码(form.js):

/** * fom缁勪欢 * @class $kit.ui.Form * @requires kit.js * @requires ieFix.js * @see <a href="https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/Form/form.js">Source code</a> */
$kit.ui.Form = function(config){
	var me = this;
	me.config = $kit.join(me.constructor.defaultConfig,config);
}
;
	$kit.merge($kit.ui.Form,/** * @lends $kit.ui.Form */
{
	/** * @enum */
defaultConfig:{
	kitWidgetName:"kitForm"}
}
);
	$kit.merge($kit.ui.Form.prototype,/** * @lends $kit.ui.Form.prototype */
{
	/** * 娉ㄥ唽鑷畾涔変簨浠? * @param{
	Object}
config * @param{
	String}
config.ev * @param{
	Function}
config.fn */
ev:function(){
	if(arguments.length == 1){
	var evCfg = arguments[0];
	var scope = evCfg.scope || this;
	if($kit.isFn(evCfg.fn) && $kit.isStr(evCfg.ev)){
	var evCfg ={
	ev:evCfg.ev,fn:evCfg.fn,scope:this}
;
	this.event = this.event ||{
}
;
	this.event[evCfg.ev] = this.event[evCfg.ev] || [];
	this.event[evCfg.ev].push(evCfg);
}
}
}
,/** * 瑙﹀彂鑷畾涔変簨浠? * @param{
	Object}
config * @param{
	String}
config.ev */
newEv:function(){
	if(arguments.length == 1 && !$kit.isEmpty(this.event)){
	var evAry,evCfg,_evCfg ={
}
;
	if($kit.isStr(arguments[0])){
	var ev = arguments[0];
	evAry = this.event[ev];
}
else if($kit.isObj(arguments[0])){
	_evCfg = arguments[0];
	evAry = this.event[_evCfg.ev];
}
if(!$kit.isEmpty(evAry)){
	for(var i = 0;
	evAry != null && i < evAry.length;
	i++){
	evCfg = $kit.merge(evAry[i],_evCfg);
	var e ={
	target:this,type:evCfg.ev}
evCfg.fn.call(evCfg.scope,e,evCfg);
}
}
}
}
}
);

CSS代码(css.css):

body{width:980px;margin:0 auto;font-family:"寰蒋闆呴粦";color:#7d7d7d;}
img{border:0;}
h1,h2{text-align:center;position:relative;}
h1{color:#0092d3;}
h2{color:#53bde8;}
h3,h4,h5,h6{margin:0;}
ul,ol,li{margin:0;padding:0;text-align:left;vertical-align:top;}
li *{vertical-align:middle;}
a{color:#7d7d7d;}
a:hover{color:#000;}
.indent{margin-left:2em;}
.footer{text-align:right;font-size:12px;}
h1 img{vertical-align:middle;}
.code{margin-left:2em;background-color:#aaa;border-radius:5px;padding:5px;font-size:14px;color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)