js表单验证

HTML代码

<form action="/" method="post" name="frm">
			用户名：<input type="text" name="useName" value="" placeholder="请输入用户名" /><span id="useError"></span><br />
			密码：<input type="password" name="pwd" value="" placeholder="请输入密码 "/><br />
			确认密码:<input type="password" name="spwd" value="" placeholder="请再次输入密码" /><span id="sure"></span><br />
			电话:<input type="tel" name="phone" value="" placeholder="请输入电话号码" /><span id="phoneError"></span><br />
			邮箱:<input type="email" name="email" value="" placeholder="请输入邮箱" /><span id="emeilError"></span><br />
			<input type="button" name="name" value="注册" id="submit" /><br />
		</form>

js代码

//获取元素
			var useElement = document.frm.useName;
			var pwdElement = document.frm.pwd;
			var spwdElement = document.frm.spwd;
			var phoneElement = document.frm.phone;
			var emailElement = document.frm.email;
			//正则
			//用户名正则?
			var rangExp = /^[A-z0-9]+$/;
			//密码正则
			var pwdExp = /^[A-z0-9]{5,10}$/;

			//邮箱验证
			var mailExp = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

			//电话验证
			var phoneExp = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
			//获取用户名
			var useNmaeError = document.querySelector('#useError');
			//确认密码
			var sure = document.querySelector('#sure');
			//电话
			var phoneError = document.querySelector('#phoneError');
			//邮箱
			var emilError = document.querySelector('#emeilError')
	

console.log(useNmaeError)

				//用户名验证

				//用户名框失去焦点
				useElement.onblur = function() {
					//获取用户名的值
					var useName = useElement.value;
					useName = useName.trim();
					if (useName === "") {
						useNmaeError.innerHTML = "用户密码不能为空";
					} else {

						//用户名不为空
						if (useName.length < 6 || useName.length > 14) {
							useNmaeError.innerHTML = '用户名长度必须在6-14为之间';
						} else {
							var ok = rangExp.test(useName);
							if (ok) {
								//用户名合法
								useNmaeError.innerHTML = '验证通过';
								useNmaeError.style.color = 'green';
							} else {
								useNmaeError.innerHTML = '用户名只能数字由字母组成';
							}
						}
					}
				}

			//用户名框获取焦点
			useElement.onfocus = function() {
				if (useNmaeError.innerHTML !== "") {
					//清空不合法的用户��?
					useElement.value = "";
				}
				//清空span
				useNmaeError.innerHTML = "";

			}

			//密码验证

			spwdElement.onblur = function() {
				//获取密码和确认密码?
				var pwd = pwdElement.value.trim();

				var spwd = spwdElement.value.trim();
				if ((pwd.length < 5 || pwd.length > 10) && (spwd.length < 5 || spwd.length > 10)) {
					sure.innerHTML = '请输5-10位';
				} else {
					if (pwdExp.test(pwd) && pwdExp.test(spwd)) {
						if (pwd == spwd) {
							sure.innerHTML = '验证通过';
							sure.style.color = 'green';
						} else {
							sure.innerHTML = '两次密码不一致';
							sure.style.color = 'red';
						}
					} else {
						sure.innerHTML = '密码有数字和字母组合';
					}
				}
			}

			//邮箱验证
			emailElement.onblur = function() {
				var email = emailElement.value.trim();
				if (mailExp.test(email)) {
					emilError.innerHTML = '验证通过';
					emilError.style.color = 'green';
				} else {
					emilError.innerHTML = '请输入合法的邮箱';
				}
			}

			//电话验证
			phoneElement.onblur = function() {
				var phone = phoneElement.value.trim();
				if (phone.length > 11 || phone < 0) {
					phoneError.innerHTML = '请输11位';
				} else {
					if (phoneExp.test(phone)) {
						phoneElement.innerHTML = '验证通过';
						phoneElement.style.color = 'green';
					}
				}
			}



			//提交
			var btn = document.querySelector('#submit');
			btn.onclick = function() {
				//所有表单都是合法时提交表单
				useElement.focus();
				useElement.blur();

				spwdElement.blur();
				
				phoneElement.blur();
				emailElement.blur();
	
				if ((useNmaeError.style.color =='green') && (sure.style.color=='green') && (phoneError.style.color='green') && (emilError.style.color='green')) {
					var form = document.frm;
					form.submit();
				}
			}

阻止表单提交方式两种：

一：将 提交按钮改为普通button，进行绑定事件提交

二、给表单加 onsubmit = " return 事件名";

进行判断 return false，阻止表单提交