ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

form表单提交及验证实例

2021-04-04 22:29:40  阅读:151  来源: 互联网

标签:function form color classList 表单 disabled 实例 msg


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单提交实例</title>
		<style>
			.m-form{
				margin: 150px auto;
				width: 325px;
				border: 1px solid #ddd;
			}
			.m-form legend{
				width: 100%;
				line-height: 30px;
				text-indent: 1em;
				color: #fff;
				background-color: #2d2d2d;
			}
			.m-form fieldset{
				border: none;
				padding: 20px;
			}
			.m-form div{
				margin: 20px;
			}
			.m-form button{
				width: 100%;
				height: 30px;
				color: #fff;
				border: 1px solid #ddd;
				cursor: pointer;
				background-color: #2d7dca;
			}
			.m-form .msg{
				margin:5px;
				text-align:center;
				display:none;
			}
			.m-form .tip{
				padding-left:6em;
				font-size:12px;
				color:#C0C0C0;
			}
			.m-form .j-err{
				display: block;
				color: #FF0000;
			}
			.m-form .j-suc{
				display: block;
				color: #158226;
			}
			.m-form .u-txt{
				width: 160px;
				padding: 3px;
				border:1px solid #aaa;
			}
			.m-form .j-error{
				border-color: #f00;
				background-color: #FFE7E7;
			}
			.m-form .j-disabled{
				cursor: default;
				background-color: #ddd;
			}
		</style>
	</head>
	<body>
		<!-- 利用iframe无刷新提交 -->
		<iframe name="result" id="result" style="display: none;"></iframe>
		<form action="/api/login" name="loginForm" target="result" autocomplete="off" class="m-form">
			<legend>手机号码登录</legend>
			<fieldset>
				<div id="message" class="msg"></div>
				<div>
					<label for="telephone">手机号:</label>
					<input id="telephone" name="telephone" type="tel" maxlength="11" required="required"
					class="u-txt" pattern="^0?(13[0-9]|15[012356789]|18[1236789]|14[57])[0-9]{8}$"/>
					<br /><span class="tip">11位数字手机号码</span>
				</div>
				<div>
					<label for="password">密 码:</label>
					<input id="password" name="password" type="password" class="u-txt" /><br />
					<span class="tip">至少6位,同时包含数字和字母</span>
				</div>
				<div>
					<button name="loginBtn">登 录</button>
				</div>
			</fieldset>
		</form>
		<script>
			var form = document.forms.loginForm;
			var nmsg = document.getElementById('message');
			function md5(msg){
				//加密
				return msg;
			}
			function showMessage(clazz,msg){
				if (!clazz) {
					nmsg.innerHTML = '';
					nmsg.classList.remove('j-suc');
					nmsg.classList.remove('j-err');
				}else{
					nmsg.innerHTML = msg;
					nmsg.classList.add(clazz);
				}
			}
			function invalidInput(node,msg){
				showMessage('j-err',msg);
				node.classList.add('j-error');
				node.focus();
			}
			function clearInvalid(node){
				showMessage();
				node.classList.remove('j-error');
			}
			function disableSubmit(disabled){
				form.loginBtn.disabled = !!disabled;
				var method = !disabled?'remove':'add';
				form.loginBtn.classList[method]('j-disabled');
			}
			form.telephone.addEventListener('invalid',function(event){
				event.preventDefault();
				invalidInput(form.telephone,'请输入正确的手机号码');
			})
			//在表单提交的时候验证密码,监听onsubmit事件
			form.addEventListener('submit',function(event){
				var input = form.password,
					pswd = input.value,
					emsg = '';
				if (pswd.length<6) {
					emsg = '密码长度必须大于6位';
				}else if (!/\d/.test(pswd) || !/[a-z]/i.test(pswd)) {
					emsg = '密码必须包含数字和字母';
				}
				//密码不通过
				if (!!emsg) {
					event.preventDefault();
					invalidInput(input,emsg);
					return;
				}
				//TODO提交数据
				input.value = md5(pswd);
				//禁用提交按钮
				disableSubmit(true);
			})
			//状态恢复
			form.addEventListener('input',function(event){ //监听input事件或者focus事件
				//还原错误状态
				clearInvalid(event.target);
				//还原登录按钮状态
				disableSubmit(false);
			})
			var frame = document.getElementById('result')
			frame.addEventListener('load',function(event){
				try{
					var result = JSON.parse(frame.contentWindow.document.body.textContext);
					disableSubmit(false);
					//识别登录结果
					if(result.code === 200){
						showMessage('j-suc','登录成功!');
						form.reset();
					}
				}catch(ex){
					//ignore
				}
			});
		</script>
	</body>
</html>

 

标签:function,form,color,classList,表单,disabled,实例,msg
来源: https://blog.csdn.net/weixin_52374211/article/details/115434450

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有