首页 > 编程学习 > form表单提交及验证实例

form表单提交及验证实例

发布时间:2022/5/14 19:11:38
<!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>

 

Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000